Animations, Scroll

Navigations: Scroll Direction

Benjamin

3:11

14K views

Aug 10, 2023

About this lesson

In this Scroll Effects update, we’re introducing a new Trigger: On Scroll. Kickstart animations as soon as you scroll down or up—like fading out your navigation bar when people scroll down, so they can enjoy your content distraction-free. You can find a demo remix link here: https://navs-scroll-direction.framer.wiki/

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

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

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

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce an update to 0:07scroll effects allowing you to design 0:09animations based on the scrolling 0:12Direction Let's Dive Right In to take a 0:15look at how this works here I have a 0:18simple navigation bar that has position 0:21set to fixed 0:24so if we give this a preview you can see 0:26that it stays in View and overlaps our 0:29content 0:30I would like this navigation bar to 0:33animate out of view as soon as we scroll 0:36down so people can enjoy the contents of 0:40the page as soon as we scroll back up 0:43wherever we are on the page the bar 0:46should animate back in again so let's 0:50start by adding a scroll effect I'll 0:54open the menu and I'll click on scroll 0:57animation the default trigger here is 1:00layer in View and this allows you to 1:03animate layers as soon as you scroll 1:06past them or as they enter the viewport 1:08with this release we're adding a new 1:10trigger type called on scroll which you 1:14can find here this scroll animation will 1:18happen as soon as we scroll down or as 1:21soon as we scroll up depending on the 1:24direction property if replay is set to 1:28no the animation would only happen once 1:31I would like this animation to replay so 1:35if we scroll down it animates out and if 1:38we scroll back up it should animate back 1:41in again and we've also refreshed our 1:44presets allowing you to quickly 1:46experiment with different animation 1:48options before we go ahead and customize 1:51our effect let's go into the preview and 1:55see what we have so far so if we scroll 1:57down it fades out and if we scroll back 2:01up 2:02our navigation Fades back into view so 2:06the effect is working now let's go ahead 2:08and customize the animation 2:11we'll go back to our scroll animation 2:14click on effect and here I'll customize 2:18a few of the properties like setting 2:20opacity to 1. and I'll set the Y offset 2:24to be minus 64 pixels which is the 2:28height of the navigation bar I'll also 2:32customize the spring transition and that 2:35should do the trick in just a few clicks 2:39we've designed a new scroll animation 2:42triggered by changes in the scrolling 2:45Direction 2:46a simple yet powerful addition to framer 2:50unlocking even more common navigation 2:54patterns that's it for this video thank 2:58you so much for watching and stay tuned 3:01for more Navigation updates coming soon

TeachesScroll Animations

Also coversSizing Transitions & Easing

Watch on YouTube ↗

‹ Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul Lapkin

Framer Community Show & Tell July 24, 2023—Alex Socoloff, and Joris Rood ›