Framer Tutorial: Advanced Scroll Animation (ZERO Code)

in this video you are going to learn how to create this cool scroll animation on your favorite website and the best thing is that you don't need to write a single line of code to create this yes this isn't that flow where you actually need to learn HTML and CSS to create something like this this is framer which is basically a freaking dream for designers if you know figma or a similar app like that you're gonna pick framer up pretty quickly so we're going to learn how sticky positioning Works how to apply skull transforms to our frames and how to trigger these animations with scroll sections in order to follow along with this video all you need is a free framework account that you can create with the link in the description in the description you are going to also find a remix link for the project so if you didn't understand something or you just want to take a look feel free to remix the project my name is nandi this is framer University and let's get started okay so the story of this animation is that I wanted to recreate this scroll effect that we see on the cred website but unfortunately I wasn't able to do it exactly the way they did it here first of all I thought that this was created with framer but then I realized that it's not created with framer and I tried my best but it seems like the closest you can get is um is something like this which is still pretty cool I think so let's jump in and start creating the animation so the first thing that I'm gonna do as always is that I'm gonna set this main breakpoint to a stack so I'm gonna add a layout to it and the direction will be vertical and the dish will restart and the Gap will be zero and after this we can create our first section so I'm gonna draw a frame and I'm gonna set the width to fill and the height will be around 3500. I'm gonna rename it this section and now as you can see this section is really tall however the desktop breakpoint is really small so what I'm going to do here is that I'm going to select the desktop breakpoint and I'm going to set the height to feed content so it always adapts to the height of the section or the content inside of the main desktop breaker because as you can see if I select the section and I duplicate it it grows with the content inside so this is a really great setup for the main desktop breakpoint and basically for each breakpoint so making the mistake and setting the height to fit content let's see what do we have to do with this first section of course we're gonna create another frame inside of this section and as you can see I can move around this Frame freely inside of this Frame called section but this isn't what we want so we are gonna need to set the section to also a stack so as you can see in the framer we usually use stacks and we usually add these layouts to most of the frames so it is a really handy feature to learn so now as you can see we have this Frame inside of this section but I can't even find it because it's in the middle it's in the center of the section so we just need to change the distribute to start and now as you can see this is on the top so I'm gonna rename this to hero and basically it will have a feel of it and the height will be 100 VH meaning that it will always take up the 100 percent of the given viewport okay so if you take a look at the finished animation you can see that this hero frame on top is basically staying on the on the top of the U part as we scroll down the page so the way we're gonna achieve this is we're gonna select the hero frame and then the position will be set to Sticky so that's how you can achieve this effect that as we scroll through the website this hero frame is staying on top of the section in order for stick positioning to work we're gonna need to set the section to overflow visible and also the desktop the Overflow visible so basically all parent frames need to be set to overflow visible so now if we give this a I don't know red fill color we can see that if you preview this website and we start scrolling it is staying on top of the important it is not moving so this is exactly what we want but now I'm gonna just remove the fill color completely because we don't need that I think we're gonna also remove the fill color of the section frame now we can actually add some content to this hero frame let's take a look at the finished animation to see what things we need to add to this hero frame so as you can see we have a video playing inside of the hero frame and we also have text inside of the hero frame so we're gonna add these to the hero film however one really important thing here is that as you can see the effect is that this video is like kind of being masked down as we scroll so this will be achieved by creating another frame inside of the hero so let's let's just draw another frame inside of the hero section and this Frame will be set to Absolute and I'm going to activate all these pins and the values will be set to zero so I'm gonna give this a fill color so you can actually see what this does so if we set these values to zero it means that it will always stick to the sides of the frame so this is also a pretty cool responsive layout but now let's remove the fill color and rename this Frame to video mask because as I said this is basically used for masking the video and we will also contain the text so just to make things a bit quicker I'm just gonna copy the video from the completed project and I'm just gonna paste it in here inside of the video mask frame and as you can see it's set to Absolute and again all these pins are activated and the values are set to zero so basically as we resize the viewport it always sticks to the sides so this is really cool and we're gonna also get the text from here so let's copy the text and just paste it in here we're gonna set this text episode positioning and we're not going to activate any of these pins this time we're just gonna set this little dot right here and this will basically mean that the text will always stay in the middle of the frame so this is exactly what we want so now what we have if we preview this website is basically this hero section the video is playing the text is there and as we scroll it is staying on top of the port so so far so good but now we have to add the scroll transform effects so that the whole thing starts rotating and moving and scaling and all the good stuff so let's do that okay so the first thing if you look at this finished animation is that the video mask frame starts moving to the left so as you can see I'm scrolling and the whole frame is moving sorry rotating to the left that's what I wanted to say so let's do just it's really easy to do so we're just gonna have to apply an effect the effect will be scroll transform and the trigger will be sectioning mu so we actually need to create a scroll section first so we're gonna select this section and we're gonna just add a scroll section here which we'll call hero and now we can actually set this section as a trigger we could also do this by on scroll so we could also use on scroll as a trigger however I prefer the section in view because this will mean that this animation will transform the frame from the from state to the to state from the beginning of the section to the end of this section however if we use unscroll as a trigger that will mean that the animation from the from state to the two state will be happening from the top of the page to the bottom of the page so if we have more sections under this section it will you know be a much longer animation however if we set this trigger to section in View and we select the hero this will mean that this animation will only happen from the top of the section to the bottom of the selected section so let's set the from state of course the from state is one opacity the scale is also one and basically that's it for the from State and let's see what's the two states so where do we want to go okay says you can see we start rotating and we are scaling it down so the two state will be setting the scale to zero and the rotation to let's say minus 30 okay so this looks great I'm gonna set the scale back to zero and let's see what do we have right now so as we start scrolling this hero frame is star scaling down and rotating but as you can see everything is moving with it so the video is also rotating and scaling down and also the text does the same thing but if you look at the finished animation this isn't the case so the text is not rotating the video is not rotating and it's not scaling so how do I achieve that actually it's pretty easy we're just gonna have to select the video first and apply an effect this will also be a Scrolls transform the trigger rule per section in View and and we're going to select the hero section so you know the trigger is the same we're gonna also apply the transition so it will be smooth and what we're going to do here is we're going to basically counter the animation that is happening for the whole frame so the whole frame is rotating to the left so what we're going to do with the video is we're going to rotate it to the right so the from state is one opacity and one scale and the two state is 30 rotation to the right because as you remember we rotated the whole frame to the left so if we want to Contour that we're going to need to rotate the video to the right so let's give this a preview now as you can see this is this is really weird but it looks I don't know it looks not bad but I I honestly don't know why is this happening so let's think about it for a second is this hmm okay so I might know what's the issue here so as you can see the video is not rotating so we achieved that however as you remember we are scaling the frame down so the video is also scaling it down so we're gonna also have to Contour the scale effect so we are not only gonna change the rotation here and counter the rotation but we're gonna also scale this whole thing up because the frame is scaling down so to counter that we're going to need to scale up the video so let's take a look at how this looks right now and yeah it's much better maybe we need to skate it a bit more to have a nicer effect so let's say scale it up by three and let's check this out um it looks great however as you can see when we start scrolling the scale kind of stays at the same value but as we start scaling it more down down down the video also starts scaling down so that's why I couldn't actually achieve the exact effect because for some reason when we are trying to Contour the skill effect it doesn't really work as accurately as the rotation counter because as you can see the rotation is not changing at all so we can completely counter that but the scale effect is not really counterable I I don't know if that's a word but as you can see at the end towards the end it starts scaling down but that's not an issue here because we still have a cool effect imagine let's check out what scale effect I used I used for on the original so I'm gonna also use four here so let's take a look so as you can see now we we are kind of contouring the rotation and the scale too and we're gonna basically do the same thing for the text so we're gonna apply the scroll transform effect we're going to study the sectioning view we're going to hero section and the transition the from state is one opacity one scale the two state is a rotation of 30 to counter the rotation and the scale is also a bit bigger I don't know what exactly I use but let's experiment with this value okay let's check out what we used here because I'm using a scale of three here so let's use three on the text and what you can also notice on the finished website is that the text is also losing its opacity so we are decreasing the opacity so we're just gonna add it to the two effect we are gonna select the text and let's change the two opacity to zero so now as you can see as we scroll down everything works really nicely but this is just the first part of the whole thing because we also have a text coming in from the background so as you can see on this animation as we scroll down everything here in the hero is scaling down rotating to the left and then from the background we have the same text scaling in nicely and yeah basically that's the effect so what we're gonna do is we're gonna create another frame here so let's just duplicate this hero here I'm gonna change the section Gap to zero here so we don't have space between the frames here and I'm going to change this to BG text okay so we are not gonna have a video mask in here about a text and I'm gonna remove the video and basically we're gonna have the same text but with a black color now if we give it a preview you can see that this is um this is not really working so what we need to do is to somehow position this black text to the same place as the first section but how are you gonna achieve that it's pretty easy we're just gonna set the BG text from sticky to Absolute and we're gonna set these values to zero so the top and the left and the right so now as you can see it's on the top however it's not only on the top but it's on the top of the other layers too so we're gonna solve this by removing this Z index property here so now as you can see it's in the background so let's give this a preview now as you can see it's in the background but you can spot it on the top of the eport that it is scrolling away so we still need to have the sticky Behavior some way so we're just gonna wrap this text in a frame by pressing option command and enter we're going to call this sticky and let's set the positioning to Sticky but as you can see we cannot set it to Sticky it's because the BG text doesn't have a layout added to it so we're gonna add the layout to it I'm going to set the Gap to zero and now as you can see we can set the sticky frame to Sticky and now as you can see as we set it stick in now again this text is on top of everything because again it got the c Index property automatically so we're gonna remove that and now let's preview so as you can see it's still scrolling away it's because how sticky works is that it will stay sticky until the end of the parent section we're gonna just need to increase the BG text frames height so it basically is gonna have the same height as the section so 3500 so let's just paste it right here and change it to fixed and 3500 and also we're gonna have to set the Overflow to visible here so that's also why it is not working and now you can see that this Frame grow bigger the sticky frame is in the middle is because the layout options on the BG text is set to distribute Center so we're gonna just change that to start and also we're gonna set the direction to Vertical so now as you can see it's back on the top so let's give this a preview now as you can see it works pretty cool however one thing is not working because it's not exactly in the center of the viewport so we're gonna just fix that by selecting this text frame and as you can see it has a fixed width and the fixed height so that's why it's not adapting to the viewport so we're going to just change this to Absolute and I'm going to just set these values to zero which are already set to zero which is pretty cool thanks framer for doing that for me and I'm going to remove the Z index again because it's the top so let's give this a preview now and as you can see it's still not in the middle so I'm gonna just investigate the issue right here so it's still not responsive so let's then see what this sticky frame has and yes you can see the problem is that it also has a fixed height so we're gonna change it to 100 VH and now if everything is okay yeah as you can see this works perfectly so the text is in the middle okay so if we take a look at the original animation you can see that the text from the background is actually also scaling in so we're gonna just do that really easily let's go to the text and as you can see this text has some it's called transform set so I think we can remove this because it's nothing important so let's remove this and let's go to the text here select it and the from state will be basically a little bit scaled downed version of the text so let's say 0.5 and the two state is the one opacity one scale and the rotation is set back to zero so let's take a look now so as you can see it doesn't work I'm pretty shocked why is that let's go back to the animation and see why the scroll transfer doesn't work it's very easy the reason is because we didn't set the section here so let's set it to hero and now if we give it a preview you works just as we want it to work so yeah this is the animation but just to make it a bit more complete we're gonna add an additional section to it as you can see on the original animation after this we have this little text here so let's make it really quick so I'm gonna just select the section duplicate it I'm gonna change the name of this cross section to Second and I'm gonna remove this hero here we're just gonna keep this BG text here the section will be set to fit content and the BG text will be set to relative positioning and the height will be 100 VH okay this is sticky which we don't need so I'm just gonna remove that and the scroll effect okay we're gonna care about that later I'm just gonna get the text from the original file here so let's copy that and paste it in here let's change the width to a fixed number okay so this looks great now let's give this a preview and as you can see as we scroll right here we see the text appearing on the screen and it also has this nice scroll effect here as you can see as we scroll through the text it scales in I actually like it it's by mistake because we duplicated the previous section and this text already has this scroll transform set but yeah I quite like it so I think we're gonna keep it like this and there is one last thing that we are gonna do because as we look at the original animation you can see that this text right here in the middle is fading out as we scroll down so the way we're gonna achieve that is by selecting the text and I'm gonna edit this scroll transform properties here I'm gonna add another section because we have the second section here so I'm gonna say that okay when you reach the second section go to zero opacity or start going to zero opacity of course nice and slowly so now as you can see it start losing its opacity and now we see the second section with the text so yeah this is the animation and as you can see it's very easy to do with framer and it's kind of amazing that we didn't have to write a single line of code basically to create this scroll effect so yeah this is how you can create this scroll animation in framer without writing a single line of code make sure to check out the description to find the remix link framer University and other useful resources that will help you learn everything about framer so that's it for this tutorial make sure to like it and subscribe for more and I'm gonna see you in the next one foreign [Music]

Channel: Framer University

Views: 24,227

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, tesla website, scroll animation, scroll effect, animation on scroll

Id: NAwKcF-wQXE

Length: 23min 21sec (1401 seconds)

Published: Mon May 01 2023