Framer Slide on Scroll Effect In 2 Minutes! (Learn Web Design)

hey how's it going guys in today's tutorial we'll be making this reveal effect in framer let's jump straight into it so I have this section here with the layout to the center I'm going to draw a frame let's give the width 300 and the height 400 you can obviously choose whatever size you want I'm going to give it a color for now you can obviously put images here let's name this layer image and let's give it a shadow I'm going to give it something like 52 on the blur 20 on the Y and let's play with the opacity now let's take that image and wrap it in a frame let's make sure the frame overload is set to visible and let's add a scroll section and call it something like rev right now let's go to the image and duplicate it four more times so we have five images it's very important that you go to the second image from the top and add an effect scroll transform now let's select section in View and in section make sure it's set to review now go to from and set opacity to one and scale to one and on two let's set scale to something something like 87 and offset let's set that to 170 now we're going to copy this effect go to the third layer paste it and then go to two and change 170 to minus 170 then go to the fourth image and again paste the effect this time let's change the size to 72 and the offset let's times it by two so instead of 170 it's 340 now let's copy this effect and go to the final image paste it and instead of 340 let's make sure it's minus 340 now if we go you'll see that we have this effect but there's one thing missing and it's a smooth animation so let's go to transition and set this to something like 240 and now when we scroll you can see that it has this like delayed smooth effect so yeah that's pretty much it you can now add your images like I did here and you're going to get this cool effect so this has been it I hope you enjoyed if you found this valuable make sure to subscribe see you guys in the next one

Channel: Tay Rush

Views: 2,673

Keywords: framer, framer tutorial, web design, graphic design, how to web design, framer animation, framer website, framer university, framer scroll animation, framer scroll interaction, framer scroll, framer scroll section, framer effects, framer effects tutorial

Id: 6ihr9GIAE1s

Length: 1min 59sec (119 seconds)

Published: Tue Feb 13 2024