Parallax Scrolling in Figma

I used this week’s Daily UI challenge to create a landing page with parallax scrolling in Figma.

I, like most people, love a good parallax landing page. It gives a page depth and motion in a way that few other effects can achieve.

Creating this effect is fairly simple thanks to Figma’s smart animate option in prototyping.

How does it work?

Smart animate matches layers across screens and animates based on how that layer changed from the first frame to the second. It’s important to keep layer names precise for this reason. The tool can only find the corresponding layer across art boards if they have the exact same name.

If a layer starts at the top of the frame in the first screen then is placed at the bottom of the frame in the second screen, smart animate will show that layer sliding down the screen when you smart animate between the first and second screens.

To achieve a parallax effect, you want different layers to move at different speeds to give depth. This can be accomplished by increasing the distance the layer travels.

The leaves towards the bottom of the second screen will appear to fall faster because they have longer to travel in the same amount of time. The leaves closer to the top will fall slower because they have to fall for the same amount of time, but don’t have as far to go.

Bonus Effects

Moving layers isn’t the only thing smart animate can animate. It can also animate changes in color, opacity, size, etc.

I created especially large text in the first screen and used a smaller text size in the second screen. When I use smart animate, the text shrinks slightly as it slides down on the screen.