I was looking to expand my portfolio on webflow, and doing this on the free version with only 2 available pages, really helped me create sections for each topic. honestly appreciate to time you took to make this tutorial
I like the direction of this effect opposite of the other tutorial I found. Can you imagine a way to go horizontal if the user wants to see more detail of any one of the sticky cards? I ask for mobile purposes. Thanks in advance!
Quick question Mike. Say the content is one card is long than the others. How do I make it of the each card to fully scroll each content and then follow by the other stacks. If you get what I mean
how can i make it that there is a heading above that also disappears simultaneously to the other cards? I tried applying it to sticky and giving it a bottom margin similar to the other cards but it still disappears behind them.
Hey Mike! Thanks for this great tutorial and cloneable. On both the demo and cloneable, it doesn't look like the last feature of the stacked scroll is working. It looks like it's set w/ the margin-bottoms- any ideas?
Hey, yes I just had a look and you are right. Don't know why this is the case though. I did not change anything in the cloneable. Maybe a browser change / Webflow bug. What you can do is, you can wrapthe cards in a .stack_card-wrap class and set the stacking offsets there as padding bottom's. instead of margins directly on the card
@@mikepecha Hi Mike, I tried the work around you suggested but it creates a space and squeezes the image. If I used a margin it results in uneven distance between each card. Any other solutions?
Hi Mike, what if you wanted to have a side-by-side section. On the left a "static" section with a title, and on the right the stacking cards section. How would you achieve this?
Hi Carlos, multiple ways to achieve that. You could for example create a container, set it to a grid with two columns. The left column is title section, the right column is your stacking cards section
Is there a way to make them stack slightly horizontally as well? So coming down diagonally from top left to bottom right? I would have thought it was just an addition to the sticky position left?
hey mike! thanks for amazing tutorials and clones. I use your stack card technique for my upcoming project and have a question? I want stack card effect only for my desktop version and not for my tab and mobile, i am failed to understand what should i do? Should i go for a new layout for tablet and mobile and make it display None on desktop?
I cant edit or move anything inside a card, cant put a quick stack inside a card, beats me why, drop a quick stack on a card and its 2 cells and I cant edit it.
▶ Check out my Webflow app:
inputflow.io
I was looking to expand my portfolio on webflow, and doing this on the free version with only 2 available pages, really helped me create sections for each topic. honestly appreciate to time you took to make this tutorial
Happy to hear that :)
Thanks for writing the comment
Das ist mein erstes Video von Dir. Du machst es großartig. Vielen Dank für Deine fantastische Arbeit
Vielen Dank :)
Thank you for this easy tutorial
You’re welcome 😊
I like the direction of this effect opposite of the other tutorial I found. Can you imagine a way to go horizontal if the user wants to see more detail of any one of the sticky cards? I ask for mobile purposes. Thanks in advance!
Thanks a lot for the trick! Amazing content! Keep it up as you are amazing!
Thanks, will do!
Thank you for this well explained tutorial ❤
You are welcome my friend
Easy to follow! THank you
Thank you, Mike!
My pleasure!
Saviour! Thanks for sharing it, super useful
Great tutorial. Well explained step by step.
Thanks a lot Selasi :)
Quick question Mike. Say the content is one card is long than the others. How do I make it of the each card to fully scroll each content and then follow by the other stacks. If you get what I mean
So cool!! Keep grinding mate!! Thanks to help us, can't wait for more animations tutorial!
Thank you Rayane :)
Thanks Mike, this was super helpful 👏
Thanks drock :) Happy to hear that!
Great video, Great work! Keep on :)
Thanks a lot, David!
Excellent video, thanks
Thanks a lot :)
cool. good work!
Thanks :)
excellent way to teaching
great tutorial
Thank you, Simon :)
Mike, you make very instructive and useful videos! Thanks a lot (again)!
Thanks a lot mate :)
I appreciate your comments.
Great Tutorial! Helped me a lot, thx 🙏🏻
how can i make it that there is a heading above that also disappears simultaneously to the other cards? I tried applying it to sticky and giving it a bottom margin similar to the other cards but it still disappears behind them.
Hey Mike,
Great tutorial, could you please show how to do the same horizontally? thanks
Great suggestion, Karan! I will put that on my list.
Hey Mike! Thanks for this great tutorial and cloneable. On both the demo and cloneable, it doesn't look like the last feature of the stacked scroll is working. It looks like it's set w/ the margin-bottoms- any ideas?
Hey, yes I just had a look and you are right. Don't know why this is the case though. I did not change anything in the cloneable. Maybe a browser change / Webflow bug.
What you can do is, you can wrapthe cards in a .stack_card-wrap class and set the stacking offsets there as padding bottom's. instead of margins directly on the card
@@mikepecha Hi Mike, I tried the work around you suggested but it creates a space and squeezes the image.
If I used a margin it results in uneven distance between each card. Any other solutions?
very nice, thanks !! ;)
Hi Mike, what if you wanted to have a side-by-side section. On the left a "static" section with a title, and on the right the stacking cards section. How would you achieve this?
Hi Carlos, multiple ways to achieve that. You could for example create a container, set it to a grid with two columns. The left column is title section, the right column is your stacking cards section
Thank you
You're welcome, Casper!
Hi Mike! I am having a problem building this stacking card, my last card stays separated at the bottom, what can I do to solve this issue?
What is the global styles component you have, and is it essential?
Google "Finsweet Client First"
great mate
great. its help me too much
Thanks :)
hi, this effect can be done with cms? thx before, great video!
Yes, it can be done with the CMS, but it would require a few lines of custom code
Thank you som much!
Is there a way to make them stack slightly horizontally as well? So coming down diagonally from top left to bottom right?
I would have thought it was just an addition to the sticky position left?
Hi Innit A Mailman, if you also want the cards to move horizontally, you can add a Webflow animation/interaction👍
Really good thanks
How do you do this to a cms of multiple cards
You need a little bit of Custom CSS for that
Nice tutorial, i'm looking to do this effect with a CMS list, do you think is it possible ?
Yes, it is possible but requires a few lines of custom code
Please make more videos!!
I will, thanks :)
Can this be done on the free webflow account?
Yes, it can be done with the free Webflow account 👍
hey mike! thanks for amazing tutorials and clones. I use your stack card technique for my upcoming project and have a question? I want stack card effect only for my desktop version and not for my tab and mobile, i am failed to understand what should i do? Should i go for a new layout for tablet and mobile and make it display None on desktop?
Remove position sticky from the cards in mobile
is it possible on mobile?
Yes
I cant edit or move anything inside a card, cant put a quick stack inside a card, beats me why, drop a quick stack on a card and its 2 cells and I cant edit it.
Did you solve this problem?
But y put margin??
To keep the cards in the stacked state when scrolling out of view.