Parallax Animation: Free Figma Tutorial

Topics covered in this Figma tutorial:

Setting Up the Parallax Assets, Building the Parallax Animation

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use smart animate to create a parallax animation.

Setting Up a Parallax Photo

Parallax animations are when multiple layers move at different speeds to create a sense of depth. Things father away (in the background) move slower. Each layer that is closer moves faster, with the closest layer moving the fastest.

The hardest part of creating a parallax animation, is the Photoshop work. We’ve already done this for you, but you’ll need each layer with the unwanted elements removed (transparent). To get them into Figma with transparent backgrounds you can save them as PNG. Below is how our 3 layers (background, middleground, and foreground) look:

Opening the File

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class and double–click on Parallax.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

Setting Up the Layers

We’ve already brought in the background photo, but you will need to add the other 2 layers (middleground and foreground).

1. Click on the photo at the top of the frame to select it.
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).

On the frame, nothing will look different because the copy is in the same exact position, except in front (on top) of the previous photo. In the Layers panel though, you can see there are now 2 Background layers. Next we’ll replace the top one with our middleground photo.

2. In the toolbar at the top left, click on the down arrow next to Rectangle tool and from the menu that appears choose Place image/video .
3. Navigate into Desktop > Class Files > Figma Class > Parallax Photos and double–click on Middleground.jpg to choose it.
4. Click on the top photo to replace it with this new photo. (Nothing visually will change, but that’s what should happen!)
5. In the Layers panel, double–click on the top layer named Background and rename it to Middleground.
6. Let’s do this one more time for the foreground photo. With the Middleground photo still selected, duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
7. In the toolbar, click on the down arrow next to Rectangle tool and from the menu that appears choose Place image/video .
8. Double–click on Foreground.jpg to choose it (if you don’t see it, navigate into Desktop > Class Files > Figma Class > Parallax Photos).
9. Click on the top photo to replace it.
10. In the Layers panel, double–click on the top layer named Middleground and rename it to Foreground.

Putting the Whole Thing In a Frame

We’ll be moving the foreground up faster than the background, which will cause the bottom of the background to become visible. To hide that unwanted area, we’ll need something to crop it off. We could use a mask, but using a frame will be easier.

1. In the Layers panel, click on the layer The Islands of Hawaii.
2. Hold Shift and click on Background layer.
3. Ctrl–click (Mac) or Right–click (Windows) on the selected content and choose Frame selection.
4. In the Layers panel, rename Frame 1 to parallax.

5. With the frame still selected, in the Design panel on the right check on Clip content.

   Nothing will visually change, but later we’ll be able to use this frame to crop off (clip) the bottom of the background.

Building the Parallax Animation

To build the animation we need 2 frames: one for how the design will look initially, and a second for how the design will look in the end. We already have the first frame, so let’s make the second.

1. Click on the parent frame’s name Parallax Start to select it.
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
3. Rename the new frame (on the right) by double–clicking its name and changing it to Parallax End.
4. On the Parallax End frame, double–click on the top photo to go into the parallax frame.
5. In the Layers panel, inside the parallax group click on The Islands of Hawaii layer.
6. Hold Shift and in the Layers panel click on the Middleground layer.
7. Let’s move them all up. Hold Shift and press the Up Arrow key 5 times.
8. In the Layers panel, hold Cmd (Mac) or Ctrl (Windows) and click on the Middleground layer (so only the The Islands of Hawaii and Foreground layers are selected).
9. Hold Shift and press the Up Arrow key 10 times.
10. In the Layers panel, hold Cmd (Mac) or Ctrl (Windows) and click on the Foreground layer (so only the The Islands of Hawaii layer is selected).
11. Hold Shift and press the Up Arrow key 15 times.

12. We need to move the bottom of the frame up, but it’s hard to see how far up to drag, so:

    • Hide the Middleground and Background layers (hover over the layer name in the Layers panel and click the eye icon).
    • In the Layers panel, select the parallax frame.
    • Resize the bottom of the frame up to the bottom of the Foreground layer. It won’t snap, so you must be careful when resizing. The final height should be 650.
    • When done, show the Middleground and Background layers again.
13. Now let’s set up the animation. Click on the Parallax Start frame name to select the frame.
14. In the right panel, at the top click on Prototype.

15. In the Prototype panel, to the right of Interactions click the Plus(+) button.

16. Below Interactions click on the Click —> None interaction and then:

    • Change On click to After delay.
    • Change the time amount to 1000 ms (we want to see the photo for a second before it start to animate).
    • Change None to Navigate to.
    • To the right of that, change None to Parallax End
    • Under Animation change Instant to Smart animate.
    • Below Smart animate set the easing to Ease in and out.
    • To the right of easing, set the time to 4000 ms (so it takes 4 seconds to animate).
17. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
18. Wait a second and then the animation should happen automagically!

19. Press the R key to restart the animation and see it again.

    The animation is slow so you can see what’s happening, but it’s looking good! The final touch is to move the whole thing up off the screen to simulate scrolling down.

20. Close the presentation tab/window.
21. In the Parallax End frame (the one of the right), select the parallax frame (the photos and type).

22. We need to move this frame up so its so it’s fully off screen. But we have to be careful doing this because Figma can easily pull it outside the frame as we drag, which would break the smart animation.

    Start dragging the parallax frame up and as you drag, hold the Spacebar (to prevent it from coming out of the parent frame) and Shift (to prevent it moving left/right) and drag it up until it’s above the navbar (hidden outside the top of the parent Parallax End frame).

    NOTE: If you don’t like dragging, here’s another way to do it:

    • In the Design panel, notice the height (H) should be 650.
    • Set Y to -650 (don’t miss the minus part!) and hit Return (Mac) or Enter (Windows) to apply it.

    Now the parallax group should be fully outside the top of the frame.

23. There’s more text/photo content lower on the frame. Drag that content up so the first paragraph looks nice below the navbar.
24. Click in an empty area of the canvas to make sure nothing is selected.
25. At the top right of the window, click the Present button .
26. Wait a second and admire the final animation!

27. Press the R key to restart the animation and see it again.