Animations

Triggering animations on scroll in Framer (Animation Lesson 7)

Joseph

14:04

30K views

Aug 14, 2025

About this lesson

The Appear Effect is perfect for adding animations above the fold — since they start automatically when the page loads. But for elements further down the page, we might wanna wait to trigger animations until the visitor scrolls to a certain point. This is exactly where another effect called “Scroll Animations” comes into play.

In this lesson, we’ll look at how to trigger animations in Framer based on scroll position from simple layer reveals to animating entire sections into view.

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=0s Intro

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=44s The three ways to trigger on scroll

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=68s Project overview

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=115s Add a scroll animation to the frame

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=165s Choose the “layer in view” trigger

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=206s Replay behavior: enter vs. exit

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=243s Customize the enter effect (scale in)

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=304s Preview and fine-tune timing

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=471s Switch to the “section in view” trigger

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=508s Set where the section triggers (top/center/bottom)

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=604s Mirror the animation for the right element

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=649s Trigger on scroll for the nav bar

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=754s Tune easing and duration

https://www.youtube.com/watch?v=xpjUbDJYHNA&t=819s Wrap up

Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-trigger-on-scroll

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00The appear effect is perfect for adding 0:01animations above the fold since they 0:04start automatically when the page loads.0:06But for elements further down the page,0:09we might want to wait to trigger 0:10animations until the visitor scrolls to 0:13a certain point. This is exactly where 0:15another effect called scroll animations 0:18comes into play. In this lesson, we'll 0:20look at how to trigger animations in 0:22Framer based on scroll position. From 0:24simple layer reveals to animating entire 0:27sections into view.0:29[Music]0:32For the lessons in this chapter, we're 0:34going to be working with a new project 0:35file, and you'll find a link to remix 0:37that in the description below. And in 0:40this particular lesson, we're talking 0:41about triggering animations on scroll,0:44which can be triggered one of three 0:46ways, and we're going to go over each 0:47one. The first of which is triggering 0:50the animation when the animated element 0:52itself reaches a certain position. The 0:55second is triggering the animation when 0:57a section reaches a certain point in the 1:00viewport. And the third is triggering 1:02the animation just because we're 1:04scrolling. Either because we're 1:06scrolling down or because we're 1:07scrolling up. So, let's take a look at 1:09the project that we're working with 1:11here. I'm actually going to hop directly 1:13into preview mode and just show you that 1:15as we scroll down, we have this sort of 1:17hero image here that has some animated 1:19elements going on inside that. That's 1:20actually just a video. And if I continue 1:22scrolling, we have this section here 1:25which presents with this radial gradient 1:27that's spinning. We just basically have 1:29a loop effect going on there. And then 1:31we have this little graphic element that 1:33represents a piece of UI. And we want 1:35this and this to animate in. And coming 1:38back up here, we want this whole thing 1:40to animate in. But we don't want it to 1:42animate in when the page loads because 1:44those are below the fold, so to speak.1:46We don't see them until the viewer 1:48scrolls down a bit. So, we want to 1:50trigger those animations once we've 1:52reached a certain scroll position. So,1:54what we're going to do first is just 1:56select this whole frame. And with this 1:58frame selected, I'm going to come down 1:59here to effects like we did in the 2:01previous chapter. I'm going to click and 2:03I'm going to choose to add a scroll 2:05animation. Not to be confused with 2:07scroll speed or scroll transform, which 2:09we're going to talk about in the coming 2:10lessons. We're going to start with 2:11scroll animation, which again is going 2:13to trigger an entire animation on a 2:16certain scroll position. So, we're going 2:18to reach a scroll position and the 2:19animation is just going to play. So,2:21it's kind of like an appear effect, but 2:23an appear effect that occurs at a 2:25particular scroll position rather than 2:27just happening as soon as the page 2:28loads. So, here we get a somewhat 2:30familiar effect popover. And the first 2:33thing we want to choose is the trigger.2:35What is going to trigger this layer to 2:37appear? And we have the onappear effect 2:40that we discussed in the previous 2:42chapter. And then we have on scroll,2:44which we'll talk about in a moment.2:45layer in view, which is what we're going 2:47to use here, or section in view. So,2:50we're going to choose layer in view 2:51because we want the timing to be 2:54relative to the layer itself. So, with 2:56layer and view selected, we have the 2:58option of timing it so that the layer 3:00will appear as soon as the top of it 3:02reaches the bottom of the viewport, as 3:04soon as the center of it reaches the 3:06bottom of the viewport, or as soon as 3:08the bottom of it reaches the bottom of 3:10the viewport. in which case the whole 3:12layer would have to come up into the 3:13viewport before the effect even gets 3:15triggered. I'm going to go with a happy 3:17medium here. I'm going to go with 3:18center. So when the center of this frame 3:21reaches the bottom of the viewport,3:23that's where the effect is going to get 3:25triggered. Then I can choose whether or 3:26not I want this effect to replay, which 3:29is why we have an enter animation and an 3:31exit animation. If we want this to play 3:33multiple times as the user scrolls up 3:35and down, then we need this to come in 3:37and then go away so that it could come 3:39back in again, right? In order to 3:41replay, we've got to replay sort of the 3:43back and forth. So, with the enter 3:45animation, we have how this appears. And 3:47with the exit animation, we get to 3:49decide how it disappears when it crosses 3:51over the top of the viewport. But just 3:53know that all these preset animations 3:55actually come with both an enter and 3:58exit animation together. So, I do want 4:00this to scale in. I'm going to choose 4:01scale in. It applies the scale in enter 4:04effect and exit effect. But since I have 4:06replay set to no, I actually don't need 4:08the exit effect. So, I'm going to get 4:10rid of that just to make it more clear 4:11that we're only working with one effect 4:14here. And when I click on the enter 4:15effect, we can actually customize how 4:18this is going to come in. So, very much 4:19like the appear effect, the enter effect 4:21is where we edit what the layer looks 4:22like before it animates in. So, it's 4:25going to start at 0% opacity. It's going 4:27to start at a scale of 0.5 or 50%. I'm 4:31actually going to bump that up. I'm 4:32going to do a more subtle scale 4:34animation where it starts at 70% of its 4:37original size instead of starting all 4:38the way down at 50%. And then we can 4:41have a rotate, skew, offset, etc., just 4:43like appear effects. And then down here 4:45we have the transition where we 4:46determine how the motion actually 4:48happens. I'm actually cool with the 4:50default spring for this. I'm just going 4:52to increase the time. I'm going to make 4:54this a little bit slower and more 4:55gradual, like 2 seconds. So, I'm going 4:58to press command P on my Mac to preview 5:00this. Crl + P if you're on a PC. And as 5:03I scroll down, we're going to reach that 5:05point. There it is. So, as soon as I 5:07reach that point where the middle of 5:09this frame reached the bottom of the 5:10viewport, that's when the animation took 5:12place. So, if I scroll up just a little 5:14bit and press command R to refresh this 5:16so that that animation hasn't taken 5:17place yet. I'm going to do it one more 5:19time. There it is. As soon as I cross 5:20that threshold, we get that animation 5:22where we go from a 7 or 70% scale and 0%5:26opacity all the way up to its normal 5:29appearance. the way we had it on the 5:31canvas. And if I keep scrolling, it 5:33doesn't go away because I turned replay 5:35off. If I go up and come back down 5:37again, it doesn't play again. And that 5:39gives us kind of more smooth, reliable 5:41performance, and it won't get annoying 5:43for the visitor as they're scrolling up 5:44and down. They're not going to get hit 5:46with that animation over and over again,5:48back and forth. So, let's head back. I'm 5:50going to head back to the design canvas,5:53and let's work on the next one because 5:55the next one's a little bit different.5:56Down here, we've got this element that I 5:59want to slide in from the left, and 6:01we've got this element that I want to 6:02slide in from the right. But I want both 6:04of those to be choreographed so that 6:05they happen together at exactly the same 6:07time. I don't want one to happen and 6:09then the other to happen a little bit 6:11later. And as you can see, we've got 6:14this element a little bit higher and 6:15this element a little bit lower. So, if 6:18we have these trigger when the top 6:20reaches the bottom of the viewport,6:21well, the tops are in different 6:22positions. What about the middle? The 6:24middles are in different positions. the 6:25bottom the bottoms are in different 6:27positions. So every triggering point we 6:29have on the layers themselves is in a 6:31slightly different position. So the 6:32timing is not going to be choreographed 6:34together unless we trigger this when a 6:38section reaches let's say the top of the 6:41viewport. When a section reaches the top 6:43of the viewport, we can trigger multiple 6:44animations at the same time all based on 6:47that one threshold, that one moment in 6:50time where that hits the top of the 6:52viewport. So that's exactly what we're 6:53going to do. And the section we're going 6:55to trigger it on is this whole section 6:57here, which is this section called all 7:00magic. And if I scroll up just a little 7:02bit, you can see there is the top of it.7:04So when the top of the frame hits the 7:06top of the viewport, that's when I want 7:07these things to animate in. But first,7:10before we can tell it that we want this 7:12section to be the trigger, we need to 7:14make sure that a scroll section is set 7:17on the properties panel. So, you can see 7:19here I've already set a scroll section,7:21but if there wasn't a scroll section 7:22set, I would need to get this frame 7:24selected and click to add a scroll 7:26section and give it a name. You can name 7:28it whatever you want. And you can even 7:29add a Y offset if you want to trigger 7:31this animation a little bit higher or a 7:33little bit lower than the top of the 7:35frame, but I'm going to leave that all 7:37alone. And I'm going to head back to our 7:40gradient container. And that's the first 7:42one that I'm going to animate here. So,7:44back down to effects on the properties 7:46panel. I'll click to add an effect. I'm 7:48going to choose to add a scroll 7:49animation again. And here, rather than 7:52layer in view, I'm going to switch this 7:54to section in view. And then I get to 7:57choose which section is going to trigger 7:59this. And that one happened to be called 8:02section all magic. So that's the one 8:04I'll choose. And then here we're going 8:06to decide something that looks similar 8:07to layer and view, but with section and 8:09view, we're actually saying where in the 8:12viewport should the top of the section 8:14trigger the animation. So, with this set 8:17to top, when the top of the section 8:19reaches the top of the viewport, trigger 8:21it. Here, when the top of the section 8:23reaches the center of the viewport,8:25trigger it. And here, when the top of 8:27the section reaches the bottom of the 8:28viewport, trigger it. I'm going to set 8:30this so that the top of the section has 8:32to reach the top of the viewport so that 8:35the viewer has to scroll a little bit 8:37further before this will trigger, at 8:39least relative to these other options 8:41here. And I don't need this one to 8:43replay either. And in this case, instead 8:45of fade in, I'm going to have this slide 8:48in left, which means slide in from the 8:51left. And then because I'm not repeating 8:53it, I can get rid of the exit animation 8:55and just focus on the enter animation,8:58which is going to start at 0% opacity.9:00And it's not going to scale, it's not 9:02going to rotate, it's not going to skew.9:03It's just going to come from a position 9:05offset on the xaxis of -50 pixels. And 9:09as I move this up and down, you can see 9:11that we're really just moving this on 9:13the X axis here. But again, I'm happy 9:15with negative 9:17150. And then we can just focus on the 9:20transition, the movement that's going to 9:21happen here. Again, I'm cool with the 9:23spring, but I am going to make this 9:25longer and more dramatic so it's easier 9:27for us to see here. I'm going to go all 9:28the way to 3 seconds. And then I just 9:32want to take pretty much all this and 9:33apply it to that little UI element 9:36there. So, what I can do here is just 9:38right click on the scroll effect that we 9:39just created and then choose copy. Then 9:43come over here and select this little UI 9:45element that I want to animate and then 9:47head down here to effects. And instead 9:49of just clicking on effects, I'm going 9:50to rightclick on effects and choose 9:52paste. Now, the problem with this is 9:54we've got the one on the left animating 9:57from the left. And now we also have the 9:58one on the right animating from the 10:00left. So, I want the one on the right to 10:01animate from the right instead. So, I'm 10:03going to go back into the enter effect 10:05for this guy, and instead of negative 10:08150, I'm going to make that positive 10:10150. So, it's coming from 150 pixels to 10:13the right. Therefore, it's going to move 10:15to the left. And that spring animation 10:17is already going to be set because I 10:18copied and pasted this whole thing from 10:20the other one. And now, we can preview 10:22this and see how it's looking. So, we've 10:25got our first effect here that happens 10:27when the middle of that layer reaches 10:29the bottom of the viewport. And then 10:30going down a bit further, we want to be 10:32watching the top of this section because 10:34when the top of this section hits the 10:36top of the viewport, there we go. We 10:38just triggered this animation and both 10:39of these layers came in at exactly the 10:41same time because they're both triggered 10:43by the same frame. Cool. So, let's head 10:46back and I'll show you the one last way 10:48that we can trigger an animation on 10:50scroll. And for this little header bar 10:52or navbar, we're going to make it so 10:54that as we scroll down, it moves up and 10:56out of the way. And as we scroll up, it 10:58comes back. So, with the frame for this 11:00whole bar selected, back down to 11:02effects. I'm going to click to add an 11:03effect. This is again going to be a 11:05scroll animation, but here we're going 11:07to choose to trigger on scroll, which 11:10means trigger on the act of scrolling 11:12itself. This isn't about how far we 11:14scroll. This is just about whether 11:16scrolling is taking place. Is scrolling 11:19down happening? Is scrolling up 11:22happening? And for this one, we're going 11:23to trigger the effect of the bar moving 11:25up and out of the way when scrolling 11:27down. and then it'll return to its 11:29normal position when scrolling up 11:31instead. And for this one, we do want to 11:33leave replay turned on. So that way as 11:35you scroll down, it'll get out of the 11:36way. As you scroll up, it'll come back 11:38and vice versa no matter how many times 11:40you scroll up and down. And the closest 11:43preset that I could start with is 11:45probably slide out top because slide out 11:48top is going to have an effect that 11:50moves it up in this case 150 pixels,11:53which is actually excessive because our 11:55navbar is only 64 pixels tall. So, we 11:58could set this to exactly 64 or we could 12:00round up to 70. So, that way the 12:03transition is taking place over an 12:04appropriate distance because if we tell 12:06this to move an unnecessary amount, it's 12:08going to have to move faster in order to 12:11get to that point in the same amount of 12:13time. So, if we want our duration to 12:16correlate more accurately to the actual 12:18transition that's visible, we only want 12:20it to move as far as what we can see. So 12:24in the case of a navbar, we want it to 12:26move up by pretty much its own height.12:29So in this case, transition is set to 12:3104, which is a little on the quick side.12:34I'll, you know, let's just do 0.5. And 12:36one little problem we're going to have 12:38with spring is that it's going to 12:39overshoot by just a little bit. And we 12:42don't want the navbar to come down too 12:43far. So I'm actually going to switch 12:44this from spring to ease. And we'll 12:47leave it on ease in and out. So that way 12:49we can see it ease in on its way up and 12:52ease out on its way down. And again,12:54time set to 0.5. That's looking good.12:57And let's preview this and see what 12:58we've got. And there we go. As I scroll 13:01down, it gets out of the way. As I 13:03scroll up, it comes right back. And you 13:05can see here that in the effect, it is 13:07fading in. And we don't necessarily need 13:09it to fade in since it's coming in from 13:12off the screen. So I'm going to revisit 13:14the effect itself. And I'm gonna say,13:16you know what? Let's start at 100%13:19opacity since we can't see it anyways.13:21And then we'll have it move in without 13:22the fade. And we'll preview that again.13:25And that is looking good. Now we don't 13:27have that unnecessary fade. We've just 13:30got the movement in. And as we scroll 13:32down, boom, we've got that animation.13:34And again, everything is working 13:36together here in perfect harmony. And 13:38there you have it. Scroll animations can 13:40trigger effects with the rhythm and 13:42pacing set by the visitor as they scroll 13:45down the page, guiding them naturally 13:46through your content, one reveal at a 13:49time. That's it for this one. I'll see 13:51you in the next one.

TeachesScroll Animations

Also coversAppear Effect Frames Links Loop Effect Remix Links Scroll Speed / Parallax Scroll Transform Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Text Highlights

Framer Update: Overflow Clip ›