Animations

Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)

Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)

Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)

Joseph

·

4:16

·

17K views

·

Aug 26, 2025

About this lesson

If you’ve ever looked out the window of a moving car and noticed that the trees on the side of the road are whizzing by faster than the mountains in the distance, then you’ve observed something called "parallax".

It’s a phenomenon we can exploit to make our brains think that things are closer or further away. In this lesson, we’ll use Framer’s Scroll Speed effect to layer elements that move at different speed as the visitor scrolls, creating a sense of three dimensional depth.

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

https://www.youtube.com/watch?v=ywBHtTSiluQ&t=7s What is parallax?

https://www.youtube.com/watch?v=ywBHtTSiluQ&t=33s Project setup and elements

https://www.youtube.com/watch?v=ywBHtTSiluQ&t=57s Understanding depth and speed

https://www.youtube.com/watch?v=ywBHtTSiluQ&t=78s Applying scroll speed effect

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

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

Sign up: https://framer.link/yt

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

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

0:00If you've ever looked out the window of 0:01a moving car and noticed that the trees 0:03on the side of the road are whizzing by 0:05faster than the mountains off in the 0:06distance, then you've observed something 0:08called parallax. And it's a phenomenon 0:11that we can exploit to make our brains 0:13think that things are closer or further 0:16away. In this lesson, we'll use Framer's 0:18scroll speed effect to layer elements 0:20that move at different speeds as the 0:23visitor scrolls, creating a sense of 0:25three-dimensional depth.0:28Again,0:30for this lesson, we're going to be using 0:31the same project file that we used for 0:33the past couple of lessons. So, if you 0:35don't already have that, grab the remix 0:37link from the description below and head 0:39to the third page of the project called 0:41scroll speed. And here you'll see we've 0:44got a few elements. We've got this UI 0:46and we've got a couple of these 0:48three-dimensional geometric elements and 0:50they're all just kind of sticking 0:51together, scrolling at the same speed.0:53And we're missing an opportunity to 0:55create quite a bit more depth here. And 0:58the most fundamental thing to note if we 1:00want to add depth that's plausible, that 1:02mimics the way things work in the 1:04physical world, is that if something is 1:06closer, it moves faster. And if 1:08something is further away, it moves 1:10slower. That is the very nature of 1:12parallax. So if we've got this element 1:15here that's clearly behind the UI that's 1:17overlapping it, then we would want this 1:19to move a little bit slower than the UI 1:21that's in front of it. So, what we're 1:23going to do is with this element 1:24selected, we're going to come over here 1:26to effects and we're going to choose to 1:28add scroll speed. And this popover 1:31couldn't be more simple. There's only 1:32one property for us to worry about, and 1:34that is speed. 100% is the normal 1:38scrolling speed of everything that's on 1:39the page. We are going to go slower than 1:42that by lowering it down to 80%. And 1:45before we go any further at all, I'm 1:47going to hit command P on my Mac to 1:49preview this and show you what the 1:51result is. And as I scroll, you can see 1:53that that element is in fact scrolling a 1:56bit slower than everything else on the 1:59page. It's scrolling at 80% of the speed 2:01of the other elements on the page. So,2:04let's go a little bit nuts with this.2:05I'm going to leave preview mode here.2:07And let's do these other couple of 3D 2:10floating elements here. Let's say that 2:12this one that's overlapping the image 2:14that's behind it, the implication is 2:15sort of that it's closer to us. So, that 2:18being the case, we want it to move a bit 2:20faster. So again, I'll add the effect,2:22choose scroll speed, and this one, I'm 2:25going to crank it way up to 140%. So 2:28that's going to scoot quite a bit 2:29faster. And then this one down here,2:31it's also on top of some things. So 2:34let's make that one move a little 2:35faster, too, but not as fast as the 2:37other one. We'll choose scroll speed.2:39And this one I'll set to 120%. And then 2:43again, command P on my Mac to preview 2:45this. And as we scroll, there we go. The 2:47closer ones moving the fastest. We've 2:50got this one here in the middle moving 2:51at normal speed, but because everything 2:53else is scrolling at a different speed,2:54it looks like we've applied the effect 2:56to this as well. So, we've got 2:58everything here scrolling at a slightly 3:01different speed. And if we wanted to, we 3:02could go one step further. We could say 3:04that this text here is way off in the 3:07distance, kind of like the mountains off 3:09in the distance or the moon in the sky.3:11So, we'll leave preview mode here, and 3:13I'll select that frame, and I'm just 3:16going to do this entire text lockup 3:17frame here. Again, I'll come down to 3:19effects, click to add the effect, and 3:21choose scroll speed. And for this, we're 3:24going to slow this one way down so that 3:26it looks further away. I'm going to slow 3:28it all the way down to, let's say, 40%.3:31And now when we preview it as we scroll,3:33see that's now going so much slower that 3:36it's going to end up getting overlapped 3:38by the other elements as they come up.3:41So, we get that really cool foreground,3:43middleground, background relationship 3:45between all these layers that just adds 3:47a ton of depth and visual interest. And 3:50there you have it. Whether conscious or 3:52subconscious, the parallax effect gives 3:54our brains a signal that things are 3:56closer or further away. And with scroll 3:59speed, it's super easy to dial it into 4:01your sights. That's it for this one.4:04I'll see you in the next one.

TeachesScroll Speed / Parallax

Also coversFrames Links Remix Links

Watch on YouTube ↗

‹ Meet your Frangel — Switch fast. Ship faster.

10 Things to check before launching your Framer site ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Framer Update: Flow Effect in Layout Templates

Framer Update: Flow Effect in Layout Templates

Framer Update10K views · 3 months ago

Building an Expanding Article Stack in Framer

Building an Expanding Article Stack in Framer

Animations4K views · 4 months ago

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Animations7K views · 5 months ago

Making elements revolve in Framer

Making elements revolve in Framer

Animations5K views · 5 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.