Stacking Card Effect in Webflow (Tutorial)

Рет қаралды 18,226

Жыл бұрын

Learn how to use position sticky, to create a really beautiful stacking card effect in #webflow.
▶ Clone the Stacking Cards Component in Webflow:
webflow.grsm.io/stacking-cards *
▶ Build Multi-Step Forms in Webflow:
inputflow.io
#webflow
* The description of this video contains affiliate links (marked with *), which means that if you sign up for one of the tools that I recommend and decide to switch to the paid plan, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support!

Пікірлер: 63

@mikepecha Жыл бұрын

▶ Check out my Webflow app: inputflow.io

@AlfaAnlytics Күн бұрын

excellent way to teaching

@diaanhuysamen3649 2 ай бұрын

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

@mikepecha 2 ай бұрын

Happy to hear that :) Thanks for writing the comment

@marco-licht 9 ай бұрын

Great Tutorial! Helped me a lot, thx 🙏🏻

@HintCreative 8 күн бұрын

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!

@rayane5853 Жыл бұрын

So cool!! Keep grinding mate!! Thanks to help us, can't wait for more animations tutorial!

@mikepecha Жыл бұрын

Thank you Rayane :)

@drock3003 11 ай бұрын

Thanks Mike, this was super helpful 👏

@mikepecha 11 ай бұрын

Thanks drock :) Happy to hear that!

@Neoproxima Жыл бұрын

Really good thanks

@stanaalexandru21 7 ай бұрын

Thanks a lot for the trick! Amazing content! Keep it up as you are amazing!

@mikepecha 7 ай бұрын

Thanks, will do!

@RRDoker 8 ай бұрын

Thank you, Mike!

@mikepecha 8 ай бұрын

My pleasure!

@TrutherTalk 5 ай бұрын

Thank you som much!

@ezron1999 2 ай бұрын

Thank you for this well explained tutorial ❤

@mikepecha 2 ай бұрын

You are welcome my friend

@patricwagnerbln 7 ай бұрын

very nice, thanks !! ;)

@ziggerwebdesign1704 Жыл бұрын

Excellent video, thanks

@mikepecha Жыл бұрын

Thanks a lot :)

@des7638 Жыл бұрын

cool. good work!

@mikepecha Жыл бұрын

Thanks :)

@davidkathrein9644 Жыл бұрын

Great video, Great work! Keep on :)

@mikepecha Жыл бұрын

Thanks a lot, David!

@uncleanAlibertine1 5 ай бұрын

great mate

@selasifleagbo9376 Жыл бұрын

Great tutorial. Well explained step by step.

@mikepecha Жыл бұрын

Thanks a lot Selasi :)

@selasifleagbo9376 Ай бұрын

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

@casperk845 Жыл бұрын

Thank you

@mikepecha Жыл бұрын

You're welcome, Casper!

@merkmotief 10 ай бұрын

Mike, you make very instructive and useful videos! Thanks a lot (again)!

@mikepecha 10 ай бұрын

Thanks a lot mate :) I appreciate your comments.

@w3lovers969 Жыл бұрын

great. its help me too much

@mikepecha Жыл бұрын

Thanks :)

@karan.k Жыл бұрын

Hey Mike, Great tutorial, could you please show how to do the same horizontally? thanks

@mikepecha Жыл бұрын

Great suggestion, Karan! I will put that on my list.

@earthandpixel 8 ай бұрын

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?

@mikepecha 8 ай бұрын

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

@sultan_sikander_khan 8 ай бұрын

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?

@mikepecha 3 ай бұрын

Remove position sticky from the cards in mobile

@Nope-in2eq 4 ай бұрын

Please make more videos!!

@mikepecha 3 ай бұрын

I will, thanks :)

@julienflambard6301 Жыл бұрын

Nice tutorial, i'm looking to do this effect with a CMS list, do you think is it possible ?

@mikepecha Жыл бұрын

Yes, it is possible but requires a few lines of custom code

@Wiaarawr Жыл бұрын

hi, this effect can be done with cms? thx before, great video!

@mikepecha Жыл бұрын

Yes, it can be done with the CMS, but it would require a few lines of custom code

@innitamailman Жыл бұрын

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?

@mikepecha Жыл бұрын

Hi Innit A Mailman, if you also want the cards to move horizontally, you can add a Webflow animation/interaction👍

@CarlosAndresVelasquez 10 ай бұрын

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?

@mikepecha 10 ай бұрын

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

@yvesnathan6966 7 ай бұрын

What is the global styles component you have, and is it essential?

@mikepecha 3 ай бұрын

Google "Finsweet Client First"

@kunalbelamkar 10 ай бұрын

How do you do this to a cms of multiple cards

@mikepecha 3 ай бұрын

You need a little bit of Custom CSS for that

@eny_codes Жыл бұрын

Can this be done on the free webflow account?

@mikepecha Жыл бұрын

Yes, it can be done with the free Webflow account 👍

@tanmaypendse9823 9 ай бұрын

is it possible on mobile?

@mikepecha 9 ай бұрын

Yes

@rodbarker6598 6 ай бұрын

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.

@mikepecha 3 ай бұрын

Did you solve this problem?