Easy Scroll Transform Animation In Framer

Key Takeaways

When you ask somebody what they love about Framer, the word animation is probably going to come up. And to be honest, the best part, you're a piece of cake to create. My name is Matt Jumper, and while I know there are infinite ways to actually animate anything inside of Framer, one of my favorite ways is using scroll transforms. It's cuz it actually has the animation follow your scroll position. So, it creates this buttery smooth immersive experience. You've probably seen this portal style animation before where an inline section zooms in or expands seamlessly into this full bleed section. And then from there, you can kind of change anything up that you want to. It's pretty cool. So, I want to recreate that with you in this video. I'll walk you through it step by step. And as always, the remix link is in the description below. So, let's dive in. Okay. So, we have our site here. This is a super basic layout. If I just preview this, you can see that we have three sections here. First one is this hero section. Then we have our image with some text on it. This will be our portal that we'll animate. And this is just some text underneath. So you'll see here that it starts as this black background and then we have our white background at the bottom. But I want this portal or this image to act as a portal where as I scroll the image gets bigger and takes up the full screen. And you don't see this white until you've scrolled past this image. So you're actually going from this black layout into the image and then you see the white layout. So that's the goal here. So looking at how this is set up, we have our hero and her body. All this is using stacks. And then the portal here is what's important. Um I've already named and set all this stuff up. But to start, we just have everything basically at fill and fit uh for the width and the height to take in the um the children inside. This first container padding has 40 pixels of padding just to add some spacing around it. And then we have our max width container which just has a max width applied of,000 pixels. And then inside we have our text and our image. The image I have set to relative and we have it as a fixed aspect ratio with the width as fill. And then the text itself um it's set to fit and fit to contain this uh text here and it's set to absolute. That way it can sit on top of the image and the max width container actually takes in the sizing of the image uh here. So that's way it's set up right now. And as I showed you, everything's relatively positioned outside of the uh the text here. So the first thing I want to do is create a sticky positioning. So we'll go to the padding uh stack here and we'll make this sticky and top zero is totally fine. One thing you want to make sure is that your portal um any parent container so portal here um the overflow is visible as well as the main breakpoint overflow is visible. If it's not, then your sticky uh property won't work. The padding here is set to sticky, and you'll see why I had it on this layer and not this portal shortly, but we'll set this to sticky. If you preview this, nothing's really going to happen. And the reason why is because we don't have anything to uh essentially stick to. So, when this is sticky, the the height of this is set to fit and the parent container is set to fit. So, they're actually the same height. So there's nothing to um kind of wait for to catch up. So if I just tap F and make a frame here and just drag it and just put it inside of uh underneath the padding section here. Um we'll just make this say like 500 pixels. If I preview this now, you'll see that it's actually being sticky. So what's happening is um this is just getting pushed above. It's sitting behind it as you can't see, but as soon as that reaches the bottom point of that uh of this container, it's all just getting pushed away. So now you'll see this portal is the container for these two. Um and this is going to be our uh basically our our section that is creating that sticky effect. That is the scroll duration. So with this, I'm going to name this scroll. We can set the width to fill. And the height here is we're going to use a viewport based height. So the height of this is actually going to determine the length of the scroll. As you saw, um that image was just waiting for that uh scroll section to catch up with it. So I'm going to do 50 viewport height to start, which is half the height of the browser. And I'm going to set the Z-index here actually to be eight just for testing purposes. And I'm going to set the opacity to say 0.25. And that way when we preview this, we can see what's happening. So we can see the stickiness is working, but this image is kind of sitting at the top. But we want this to be fully immersive and the full height of the screen. So let's grab the padding section here. And we can set the height instead of fit. We can actually set this to be 100 VH. Now if I preview it, it sits in the middle and then that scroll stickiness is going on top. Okay, so we have the foundation. At this point, we can add a scroll transform. And to make a scroll transform, if I click on this image, for example, I can go to effects and do scroll transform. And the trigger could be on scroll, which means basically like the entire page, it's going to follow that as a map. Layer in view if I want to trigger it based off of a specific layer. But section in view is going to give us the most control in what we want to do here. So the viewport is basically deciding at what point does the animation start when the section in view actually enters and hits the top of the viewport, the middle viewport or the bottom. And we want to do the bottom. Um so that way as soon as it hits the bottom, it's starting and ends by the time it reaches halfway through the uh the image as we already previewed it. So the section, you'll see we don't have a section, so we have to make one. Um but from we choose our starting point and we'll do uh actually just set this to one and one. This is actually just the default of um how we have it in canvas. We want the scale to be larger. So let's just say um two for now and that will be much bigger than the canvas. Keeping in mind when you do scale transforms, you're not setting a percentage of the width of the browser or the height of the browser. So you actually can't really know for sure if you're covering the full width. So you want to basically cover you you decide a pixel number that you'd want to do where you're supporting a screen up to say 2500 pixels wide or 3,000 pixels wide. And you can do the math of what the max width of the image would be if it scales. So if it's 1,000 pixels and it's scaling three times, it could be 3,000. Um that's up to you of like what you want to support or like how you want to handle that edge case, but something to consider. So here we can do this uh just scaling up to two and we'll just do a quick transition on that. And if we go to that scroll layer that we have, we can add a scroll section. We'll just name it scroll. We'll go back to the image and we'll select scroll. So let's preview this and you'll see that image is now getting bigger following my mouse and ends at that 50vh part. So, it's not bad. However, I do want to make this a bit more polished and an image just growing. It looks fine, but what I want to do is actually put it in a frame and create a bit of a mask where the image actually kind of expands as you um as you scroll. So, instead of just an image getting bigger, you're actually revealing more of the image as the mask kind of gets bigger. Um we're not actually going to use a mask. We're just going to use a frame. So, we can take this image, right click, and hit uh add frame here. And it automatically is going to take in that same aspect ratio, which is good. We can just hit lock here. And then we'll take this image. And being absolute is fine. And we'll just make a relative position here. And actually just make it to 110% of the frame it's in. And just center it. So now there's some room outside of uh outside of the frame there. If I preview this, you'll see that the frame isn't animating. So it's just the image inside. What we want to do is copy this scroll transform and paste it here on the image container. Or we can even just call this mask. Um, but what we just did, if you look at this now, it's gonna get really big because it's basically the image is getting bigger and the frame is getting bigger. This is going up to two. Um, they both are. Let's increase this to three on the uh parent container on the mask. And the image, we're actually going to go smaller. We're going to offset the uh growing of the container. So, it's actually going to the image is technically going to shrink, but because it's in a container, it's getting bigger. It'll just have this cool uh masking effect. So, let's see what this looks like. So, you'll see on the edges, we're revealing more of the image there. So, it's a subtle touch. And again, math wise, you just want to look at that and play around with whatever values kind of make sense to you, how you want to handle that responsibly. But that's a cool effect that you can add that uh is free. Nobody charges you for it. So you can play with these values if you want to. Um if we drag it down to two and a half on my screen, this is going to be okay. But again, different resolutions, different screen sizes. You might want to look into what you want to support there. And now on the scroll, I'm just going to take away the fill and move that index to zero. And let's just preview this. So this looks good now and we don't see that white until after the image. So we've kind of created that portal into the world. I think we can take this one step further here and we have text here. Um I've already isolated all the text into its own layers, all the letters. So I'm going to add a same transform here or actually I still have that uh transform copied in my clipboard. So, I can hit paste and we can follow the same properties, but instead of scaling, I'm just going to set the scale back to one. And let's just add a uh negative x value to the ones in the left and then uh a positive one on the right. And then the text can actually just kind of expand as we scroll following that same scroll section. So, this one we'll do minus 90 and then minus 30. So it's a 60 pixel difference. And then plus 30. So it's 60 between them. And plus 90. And then on the text here, we can actually set this to um 100%. And let's see how that looks. It's just a nice subtle effect that follows the same mapping. And then on mobile, um, we can just click in here and the padding, we could just reduce this down to 24. And we can just play with the aspect ratios here. So this mask, we can just change this to say like 600 and lock it. And let's just preview it and see what we get. And I always like to preview this at like 812 just to mimic an iPhone. So this is a super quick way to make a scroll transform. And again, I like it because it actually follows your scroll position and it isn't like a sudden change. You could do the same thing using scroll variance, but it is the opposite of what I just described. So you could hit a trigger point and then actually have more control over like the first state and the second state cuz it just be two different variants, but it would be an instant change following the transition that you set. So it wouldn't be as smooth as this. It wouldn't be uh you wouldn't have that full control over how long the scroll is um and it following your mouse. So this is why I love scroll transforms. You don't get as much control, but but if you can work with the constraints, it ends up being a nice buttery smooth result. You guys want to see anything else inside of framer? Any specific animations?