Animations
Transforming elements on scroll in Framer (Animation Lesson 8)
Transforming elements on scroll in Framer (Animation Lesson 8)
Transforming elements on scroll in Framer (Animation Lesson 8)
Joseph
·
11:57
·
21K views
·
About this lesson
Where Scroll Animations allowed us to *trigger* an animation that carried itself out with a pre-defined duration — Scroll Transforms let us translate scrolling into smooth, gradual changes to the position, scale, rotation, and opacity of an element. Transforming elements on scroll lets the visitor drive, bringing a sense of connection between motion and input. It’s a super fun and powerful way to make your site feel more dynamic and reactive. In this lesson, we’ll look at how easy it is to make it happen in Framer.
Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-scroll-transform
https://www.youtube.com/watch?v=uvUcaMftupg&t=0s Intro
https://www.youtube.com/watch?v=uvUcaMftupg&t=48s Adding the Scroll Transform effect
https://www.youtube.com/watch?v=uvUcaMftupg&t=72s From and to states explained
https://www.youtube.com/watch?v=uvUcaMftupg&t=108s Adjusting opacity and scale
https://www.youtube.com/watch?v=uvUcaMftupg&t=144s Choosing the right trigger
https://www.youtube.com/watch?v=uvUcaMftupg&t=181s Using ‘Layer in View’
https://www.youtube.com/watch?v=uvUcaMftupg&t=285s Adding a spring transition
https://www.youtube.com/watch?v=uvUcaMftupg&t=344s Adding a nested scroll transform
https://www.youtube.com/watch?v=uvUcaMftupg&t=474s Using ‘Section in View’
https://www.youtube.com/watch?v=uvUcaMftupg&t=691s Wrap up
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00Where scroll animations allowed us to0:02trigger an animation that carried itself0:04out with a predefined duration, scroll0:06transforms let us translate scrolling0:09into smooth, gradual changes to the0:11position, scale, rotation, and even0:14opacity of an element. In this lesson,0:17we'll look at how easy it is to make it0:19happen in frame.0:24The best way to learn about scroll0:25transforms is definitely to get in there0:27and just start playing with them. And0:29for this lesson, we're going to be using0:31the same project file as we did for the0:32previous lesson, but here we're going to0:35jump into the second page called scroll0:37transforms. And if we scroll down here,0:39we've got the same elements on the0:41canvas as we did in the previous lesson,0:44but rather than triggering these to0:46animate automatically over a preset0:48duration, we're going to have them0:49animate gradually as we scroll. So,0:52let's start with this first sort of hero0:54image here. And I'll scroll down on the0:56properties panel and click to add an0:58effect. And then this time, instead of1:00adding the scroll animation effect,1:02we're going to add the scroll transform1:05effect. And in this popover, we get some1:07familiar controls. We get a trigger and1:10then we get to set a from effect and we1:12get to set a two effect. And the two1:14effect is really something new because1:16previously with the appear effect and1:18with scroll animations, we could only1:20transform the way the layer looked at1:21the beginning of the animation and then1:24the end of the animation was the layer's1:26normal appearance on the canvas. Here we1:28can actually play with both if we want1:30to. We can go from transformed to1:32normal. We can go from normal to1:34transformed or we can go from1:36transformed to transformed. It's totally1:38up to us. For this example, I'm only1:41going to play with the from the to. I'm1:44gonna leave that alone. So the layer is1:45going to end up looking the way it does1:48here on the canvas. So let's actually do1:49that. I'm going to click on from and1:52we'll say let's start this at 0%1:55opacity. And then rather than scaling up1:57from 0.5 or 50% of its original size,2:00let's have it scale up from 7 or 70% of2:04its original size. And then if I go back2:06and look at the two effect, I'm going to2:08leave the two effect alone. normal2:10opacity, normal scale, normal2:12everything, which means the layer is2:14just going to end up looking the way it2:16does here on the canvas. So, at the2:18beginning of the animation, we'll have2:19this appearance, and then as we scroll,2:21it'll transform gradually toward this2:24appearance. But then the trigger allows2:26us to decide how much scrolling are we2:29going to have to do to get from the2:30beginning of this scroll transform to2:32the end of this scroll transform. And2:34you'll see the default here just says on2:36scroll. And what onscroll means is as we2:39scroll from the very top of the page to2:41the very bottom of the page, we're going2:43to go from the very beginning of the2:44transform to the very end of the2:46transform. So that's going to happen2:48very slowly and very gradually. Let's2:50actually see what that looks like. I'm2:52going to press command P on my Mac to go2:54into preview mode. And as I scroll,2:57you'll see here barely anything2:59happening because we're near the top of3:01the page, which means we're near the3:03beginning of this scroll transform where3:05it's just coming up from 70% scale and3:08from 0% opacity. And as I scroll toward3:10the bottom, we're continuing to play out3:13that transform. We're continuing to play3:15out the animation. We just can't see it3:17because we've already scrolled past it.3:19So onscroll is definitely not ideal for3:22something like this because we want the3:24transition to pretty much be over by the3:26time we reach this point by the time the3:29entire layer is in view. So spoiler3:32alert, we want to use layer in view. So3:34I'm going to head back. I'm going to3:35leave preview mode and I'm going to head3:38back to our scroll transform and I'm3:40going to change the trigger from3:41onscroll to layer in view. And you'll3:44notice when you choose layer in view,3:45there's no top, middle, bottom, nothing3:48like that. It's just the height of this3:49layer from top to bottom as it crosses3:52over the bottom of the viewport and3:53comes into view that's going to be3:56driving this animation as we scroll. So3:59another way to think of it is if this4:01layer is 600 pixels tall, then this4:03transform is going to happen over 6004:06pixels of scrolling, starting when the4:08top edge comes into view and ending when4:11the bottom edge comes into view. So4:13let's take a look at what this looks4:15like in the preview window. I'll press4:16command P again. Scroll down. And now4:19here our transformation starts just as4:22the layer comes into view. So it looks4:24like the animation is happening all4:25along because we don't see that it's not4:27playing until we reach it. And then we4:29keep scrolling and scrolling and4:30scrolling. And once we reach the bottom,4:32there we go. We've reached the end. So4:35again, if this is 600 pixels tall, the4:37animation is taking place over 6004:40pixels of scrolling. I think the image4:42is a bit taller than that, but you get4:43the idea. It's just an example. Cool.4:45Now, let me show you what transition4:48means when it comes to scroll4:49transforms. If I click to add a4:51transition, you'll notice that in the4:53transition settings, I just get the4:56spring options. I just have a timebased4:58spring or a physicsbased spring. I don't5:00get those easing curves because again,5:02we don't have a preset duration that5:04this is going to ease over. It's the5:06visitor that's driving the motion. So,5:08we can just add a little expressiveness5:10to that by let's say I'm going to get5:12really extreme with this so it's easy to5:14see. I'm going to bring the damping way5:16down. So, this is super springy. And5:18when I preview it now, you'll notice5:20that if I scroll and stop, when I reach5:23that stopping point, that spring easing5:26is going to take place and add a little5:28bit of secondary motion to the movement.5:31But, it's totally up to you. Use your5:33own discretion. The default spring is5:35actually kind of nice. It just takes a5:37little bit of the edge off when it comes5:39to jerky input. Just kind of smooths it5:41out a little tiny bit. So, I'll leave5:43that on there. And then for good5:44measure, let's just do another one. I'm5:46going to select this video component5:48that's nested inside. I'm going to add5:50an effect. I'm going to choose scroll5:52transform once more. And for this5:54effect, again, I'm just going to edit5:56the from state. I'm going to leave the5:58opacity at one cuz again, this is a6:01child of the parent that's going to be6:02transforming. So, it's going to come in6:04from 0% opacity either way cuz it's6:06going to inherit that from its parent.6:08But the scale, I'm going to have this go6:10from bigger to smaller. I'm actually6:12going to have this go from 1.5 or 150%6:15of its original size and then come to6:18rest at the size that it appears on the6:20canvas. And I'll go ahead and add a6:22transition for good measure. And then we6:24better fix our trigger here cuz on6:25scroll again, that's going to take place6:27from the very top of the page to the6:29very bottom of the page. It's going to6:30be way too slow and gradual. So, I'll6:32switch this one to layer in view as6:34well. Now, let's preview it. I'll hit6:36command P. And as I scroll down, there6:38we go. We get this cool kind of nested6:40effect where the child layer is coming6:43in from a larger size and the parent6:45layer is growing from a smaller size and6:47bringing them both up in opacity6:49together. All right. Now for our next6:52example, when we come down here, you may6:54remember from the previous lesson that6:56because this layer is a bit bigger and6:58this layer is a bit smaller. If we use7:00layer in view, these animations aren't7:03going to start at the same time. And7:04with scroll transforms, they're not7:06going to end at the same time either7:07because the top is in a different7:08position and the bottom is in a7:10different position. So we're going to7:12have different ranges where the7:13animation takes place. So much like7:16scroll animations, our fix is to switch7:18the trigger instead to section in view.7:21So let's do that. I'm going to select7:23this one first. We'll go to effects.7:26We'll again add a scroll transform. In7:28this case, I'm going to have it start at7:300% opacity. I'll leave the scale alone.7:33And we'll have the offset transform over7:36time. And I'm going to do a pretty7:37significant offset here. I'm going to do7:39-300 pixels. So this starts way over7:42here to the left. And then it's going to7:44come to rest at its normal opacity in7:47its normal position. Again, I'll add the7:50spring. And then here's where things get7:51different. For the trigger, I'm going to7:53choose section and view. So, a little7:56bit of setup here. Again, like the7:57previous lesson, we've got this parent7:59frame here. And if we head down to the8:01scroll section part of the properties8:03panel, you can see here that I've added8:05a scroll section and named it section8:07all magic. But again, if you don't have8:09a scroll section set for the frame, just8:11get the frame selected, click to add a8:13scroll section, give it a name, and you8:15can name it whatever you want as long as8:16you remember that name for at least 78:20seconds. And then when we head back over8:22and select the element we were working8:24on, we can head back to the popover and8:26we can now choose the name of that8:28section, which again is called section8:30all magic. Now, with section of view,8:32because a section can be much larger8:34than the layer that we're actually8:35animating, we do get to choose if we8:38want it to animate as it crosses over8:40the top of the viewport, the center of8:42the viewport, or the bottom of the8:43viewport. I'm going to switch this to8:45center. So that way, as the section8:47comes up and crosses the vertical center8:49of the viewport, that's when the8:51animation is going to begin to take8:53place. And as that section crosses over8:55that center line, that is the span of8:59scrolling where that animation is going9:01to take place. So with that set, I think9:04we're all good. So let's preview this.9:05I'll press command P to preview it. And9:07as I scroll down, we're going to reach9:09that point right about now. Right about9:12now, the top of that section is reaching9:14the vertical middle of the viewport. And9:16you can see, sure enough, that is where9:19that animation begins to take place. And9:21the result ends up being pretty similar9:23to layer in view, but the difference is9:25going to be when we add this second9:28element in and have that driven by the9:31same section in view. So let's go back9:34and I'm actually going to rightclick on9:35this first scroll transform that we9:37created. I'm going to click copy and9:39then I'm going to click on this second9:40element, scroll down to effects,9:44rightclick, and then choose paste. And I9:47don't want exactly the same9:48transformation to happen. So, I'm going9:50to go back to the popover. And then here9:52for the effect, I'm going to have this9:54start at an offset of positive 300 on9:57the x-axis. So, that way it starts on9:59the right and then it's going to10:00transition in toward the left. And then10:03we should be good to go. So, I'll10:04preview again. And as I scroll down,10:06there's our layers in view. And then I10:08keep scrolling. And now this section as10:11it comes into view is driving both of10:13these layers to transform. So, with10:16something like this, you'll notice that10:18I do have to scroll pretty far before10:21this animation actually finishes taking10:23place. And that's because the bottom of10:24the section also has to reach the middle10:27of the viewport. It would actually be10:29nice if this ended when the bottom of10:31the section reached the bottom of the10:33viewport. So, I'm actually going to10:34change that. I'm going to go back to the10:35design canvas. I'm going to select both10:37of these elements, holding shift, and10:39then I'll click the transform to edit10:41it, and I'll switch it to bottom10:43instead. So now this should end a little10:46bit earlier. I'll hit command P again to10:48preview this. And as I scroll down,10:50there's our first couple layers. And10:52then here, since this section has10:54crossed the bottom of the viewport, our10:56transformation has already started. We10:58just can't see it yet. And if we keep10:59scrolling, there it is. It's made some11:02progress. It's further along. And then11:04sure enough, it ends when it's about in11:07the middle of the screen because that is11:09the moment at which the bottom of the11:11section has reached the bottom of the11:12viewport. And that is exactly how we set11:15it. So that is looking pretty good. And11:17one last thing I want to point out is11:19that when we switch to section and view,11:21we got a brand new button down here that11:22says add section. So if you wanted to,11:25you could use multiple sections to drive11:27multiple transformations for the same11:29layer. And there you have it.11:31Transforming elements on scroll really11:33lets the visitor drive, bringing a sense11:35of connection between input and motion.11:38It's a super fun and powerful way to11:40make your site feel more dynamic and11:42reactive. That's it for this one. I'll11:45see you in the next one.
More in this topic
2:05Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
1:46Framer Update: Holo Shader
Framer Update6K views · 2 months ago
1:56Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
2:28Framer Shaders
Announcement23K views · 2 months ago
2:12Framer Update: Flow Effect in Layout Templates
Framer Update10K views · 3 months ago
13:14Building an Expanding Article Stack in Framer
Animations4K views · 4 months ago
5:41Scaling a clipped image on hover in Framer
Animations7K views · 5 months ago
3:38Making elements revolve in Framer
Animations5K views · 5 months ago