Stacked Cards Effect in Framer (No-code tutorial)

hi guys it's Tony and in today's video I will show you how you can super easily achieve this Stacked Cards effect in framer here you can see an example of the effect in my latest framer template which you can easily download for free from the description below but for now let's get started so as you can see I have already set up my framer file in here and it consist of these four different cards that are inside the work section and as you can see when we preview this now they all just keep on scrolling so they are not actually stacking on top of each other so to fix that let's select all of the layers and make sure that you change the position to be sticky and I guess like by default it it's actually zero but you can change this position top to be 40 or whatever so it actually stops before the 40 pixels at the top but now when we go to the preview you can see that they still keep scrolling even though we Chang them to be a sticky cards and the reason for that is that some of the parent layers had their overflow set to be hidden so to make the sticky effect work you have to change the Overflow to be visible and now when we preview you can see that it's actually working but as you can see they all get positioned on top of each other so we want to fix that by going in into each of these layers and let's change the Top Value a bit so for the second card let's give the value of 80 for the third one let's give it like 120 and for the fourth one like 160 so there like 40 Point difference in between all of them and now when we preview you can see that it works pretty smoothly and easily and as you scroll through it it works super nice nicely note that from mobile breakpoint you should use hidden overflow so this effect will only work for the desktop view but this was it this time I hope that you enjoyed this video and if you did make sure to like it and subscribe to my channel for more future videos and let's see you again in the next video

Channel: Toni Järvinen - Design Tutorials

Views: 1,483

Keywords: framer, web design, navigation, cards, Stack

Id: -TbHIbIzjvQ

Length: 2min 19sec (139 seconds)

Published: Thu May 16 2024