Animations, Scroll

Framer Update: Scroll Animations

Benjamin

12:48

124K views

Nov 9, 2022

About this lesson

This update adds Scroll Animations to Framer. Add high-fidelity effects and animate variants within specific sections, like switching your topbar to a different theme on your landing page, or playing a video only when it’s visible. It brings the magic of Motion to Framer, and we’re very excited to see what you’ll be able to create with it.

Remix the demo here: https://topbar-animation.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

#website #framer #scroll #motion

0:00yo my name is Benjamin and in this video 0:03I'm super excited to tell you all about 0:06scroll animations in framer a brand new 0:09feature we're bringing the magic of 0:12framer motion to the framer app allowing 0:15you to do so much more so let's have a 0:18look at this demo project to explore 0:21what is now possible with scroll 0:24animations I'll start by going over how 0:27this webpage is currently set up so here 0:30we have a top bar that is fixed to the 0:34top of the viewport below it we have a 0:37header that spans the entire height of 0:40the viewport and right below that we 0:43have a few sections each with a unique 0:47section name this used to be called 0:49scroll Target and we now call it Scrolls 0:53section we've renamed this because you 0:55can now do more with this than just 0:58Target specific sections to to scroll to 1:00we also made sure that these are now 1:03reflected in the layer panel making it 1:06easy to identify which layers you've 1:08given a unique section name for example 1:12here we have a features section right 1:15below that we have the feature Dash grid 1:19section The yellow section is called 1:22bundle and the final section is called 1:25specs so that's pretty much what we have 1:27so far let's also go ahead and give this 1:30a little preview so we have our top bar 1:33that's fixed to the top of the screen 1:36and then we have our header here that 1:39occupies the full viewport height and 1:42then we have our sections below 1:45now for landing pages like these you 1:48often might want to do something with 1:51your navigation when scrolling fast or 1:54within a certain section like show or 1:57hide it animate it or even change the 2:01dint and Link colors for this page it 2:04would be lovely if our top bar turned 2:06into a yellow variant in the yellow 2:09section and a darker variant in the 2:13final section so in this component I 2:16have already set up three variants for 2:19each of these sections light dark and 2:22yellow and I'll show you how we can 2:24switch between these within a specific 2:27section in a little bit but there are 2:30more cool things we can do with our top 2:32bar we could also hide it initially and 2:36only slide it into view as we scroll 2:38past onto the banner below the header so 2:42let's give this a try with the top are 2:45selected I can head over to the effects 2:48panel in the property panel and I'll 2:50click on appear animation now an appear 2:53animation will trigger on page load as 2:56it says over here which is not really 2:59what we're after we are looking for the 3:01trigger section in view 3:04which will trigger an animation as we 3:07scroll past a certain section the 3:09section right below the header is called 3:12Banner and we can select that as the 3:15section as that is the point from which 3:17we would like to bring back our top bar 3:20I would like to trigger this animation 3:23as soon as the top part of the banner is 3:27in view so the start property here is 3:30set correctly I also want to make sure 3:32that if we scroll back up the navigation 3:35is once again hidden so I want to go 3:38ahead and set replay to yes here we 3:41could pick a preset I'll select slide in 3:44top 3:45and then right below that we could 3:48customize the enter and the exit 3:50animations 3:51this works the same as the other effects 3:54do in framer which you might have 3:56already used before I'll set opacity to 3:591 and offset y to minus 80. which is the 4:04height of our top bar and this will make 4:07sure we position it off screen by 4:09default I'll also make the spring 4:12animation a little bit slower so our top 4:15bar is now correctly initially hidden 4:17however we also want to make sure that 4:20the top bar stays visible as we scroll 4:23past the banner and onto the features 4:26section so we don't need an exit effect 4:29and I can click on the X to delete it 4:31now let's give this a preview to see 4:34what we have made so far so our top bar 4:37is correctly hidden from View and as 4:40soon as we scroll past the banner it 4:43nicely animates into view and if we 4:46scroll back up it will once again hide 4:50and that is the replay property at work 4:53and as we scroll further down below the 4:56banner the toolbar stays in View and 5:00this is because we removed the exit and 5:03animation 5:04so this is really nice and we can now 5:07continue with the variants so with the 5:11toolbar selected I'll click on effects 5:13and select scroll variant we once again 5:17want to select section in view as the 5:20trigger as we want to switch variants 5:23within specific sections the scroll 5:26variant effect allows us to select a 5:30variant to animate to the section right 5:33below the banner is called features but 5:35it matches the light theme of our top 5:38bar so we don't want to switch to this 5:41one just yet instead we want to go ahead 5:44and select the bundle section which is 5:47the yellow section 5:49and from here we can set the variant to 5:53be yellow 5:54and this might be another good time to 5:57give our web page a little preview I'll 6:00scroll down a bit 6:02as we scroll past the banner the 6:04navigation bar appears and as we scroll 6:07past the bundle it turns yellow 6:11this is great but as we scroll onto the 6:14specs section we also kind of wanted to 6:18switch to a darker variant again as to 6:21there the Yellow Version is a bit much 6:23as a reminder we have the yellow section 6:26here which is called bundle and then 6:30right below that we have the darker 6:33section which is called specs so how do 6:36we add this extra variant switch I'll 6:39reselect the top bar and I'll go back to 6:42the scroll variant effect and in this 6:45pop out you might have noticed there's a 6:48button called add section this allows us 6:51to add another section and to Define 6:53another variant to switch to allowing us 6:57to create little sequences so I'll 7:00select the specs section and the dark 7:03variant so we have now created a little 7:06sequence 7:07our top bar starts out in the light 7:10variant as we scroll past the bundle 7:13section it switches to yellow and then 7:16as we scroll from the bundle section 7:18onto the specs section it will switch to 7:21the dark variant now it's time to give 7:24this another preview 7:27our top bar slides in 7:31turns yellow and then it turns dark 7:35so this is great and we have now created 7:38a fully functional sequence using scroll 7:42animations and scroll variants these new 7:46features are fully compatible with 7:49smooth scrolling as well so let me add 7:52some links to show you I'll select the 7:55features text layer 7:57add a link pointed to the home page and 8:01then I'll select the features section 8:03and I'll set scroll to smooth 8:06and I'll go ahead and do the same thing 8:08for the other layers here 8:11I'll point this one to bundle 8:15and I'll point the final one to specs 8:20with all links in place let's go back to 8:24the home page and give it another 8:25preview 8:27and now if I click on the links it will 8:31smoothly scroll to the specific section 8:35and it will also still nicely animate 8:39the top bar to the matching variants 8:44so this is quite lovely now you might 8:47have noticed that the top bar switches 8:51when the bottom of the top bar hits the 8:55top of the section and this is also 8:58where our links smoothly scroll to 9:01this was achieved by setting offset y to 9:0580 pixels in each scroll section 9:09and again 80 pixels is the height of the 9:12top bar so now the offset y property not 9:16only allows you to add an offset to the 9:19scrolling position it's also now taken 9:22into account if you use scroll 9:24animations like scroll variant where it 9:27impacts when to switch so we make sure 9:31that these two are always in sync giving 9:34you full control finally let's also make 9:38sure our CTA here Scrolls you to the 9:42next section 9:44I'll add a link and I'll point it to the 9:48features section with scroll set to 9:50smooth and if we now give this a preview 9:54clicking the learn more link now 9:57smoothly Scrolls us to the features 10:00section as the navigation bar also 10:03slides into view very nice there is one 10:08final use case I want to show you 10:12and that is in this little features grid 10:14I have this feature video component with 10:17two variants one where the video is 10:21pulsed and another where the video is 10:24playing 10:25prior to this release you could only add 10:28scroll effects as the layers themselves 10:30scrolled into view but oftentimes you 10:34want more control like here on larger 10:37displays the video is already visible as 10:39soon as the grid Scrolls into view so 10:42really we want to tell framer hey start 10:45playing this video as soon as the 10:48feature grid is in View and this is now 10:51possible 10:52I'll add a scroll variant effect to the 10:55feature video 10:57and I'll select the section in view 11:00trigger 11:01I'll select the feature grid as the 11:04section and we'll switch to the playing 11:07variant we can then add another section 11:10to set the video back to past as we 11:13scroll onto the bundle section this 11:16makes sure the video is only playing 11:18when we can actually see it and that's 11:21all there is to it we can now give this 11:23a preview to see how this works I'll 11:27slowly scroll towards the section 11:30so now as we can see the video is still 11:32past because we haven't hit the feature 11:35grid 11:36and as soon as we hit the feature grid 11:38the video starts playing 11:41as we scroll to the bundle section now 11:44the video is pulsed which should help 11:47with performance 11:49and as soon as we scroll back up the 11:52video is once again playing 11:53and this also works with our smooth 11:56scrolling links this is great as it 11:59allows you to control the viewing 12:01experience of your content to make sure 12:03that it's consistent for every user of 12:06your website no matter how much time 12:09they've spent looking at your header for 12:11example everyone will see the video 12:13right from the start 12:16that's pretty much it for this video 12:18this release allows you to do so much 12:21more with effects in framer and we're 12:23very excited to share it with you and as 12:26always thank you so much for watching 12:28and stay tuned for more updates coming 12:31soon 12:40[Music]

TeachesScroll Animations

Also coversComponent Variants Components Grids Links Scroll Variants Sizing Themes

Watch on YouTube ↗

‹ Framer Update: Scroll Transforms

CMS: Conditionals and Transforms ›