Parallax Animation: Free Adobe XD Tutorial

Topics covered in this Adobe XD tutorial:

Setting Up the Parallax Assets, Building the Parallax Animation

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use auto-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 XD with transparent backgrounds you can save them as PNG. Below is how our 3 layers (background, middleground, and foreground) look:

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on Parallax.xd to open it.

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

3. In the Toolbar, choose the Select tool .
4. If the Layers panel is not open, go to the bottom left of the window and click the  icon.
5. Click on the top (header) photo to select it.

6. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).

On the artboard 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. Now we can replace the top one with our middleground photo.

2. Ctrl–click (Mac) or Right–click (Windows) on the header photo and choose Replace Image.
3. Navigate into Desktop > Class Files > Adobe XD Class > Parallax Photos and double–click on Middleground.jpg to choose it.
4. In the Layers panel, double–click on the top layer named Background and rename it to Middleground.
5. 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).
6. Ctrl–click (Mac) or Right–click (Windows) on the header photo and choose Replace Image.
7. Double–click on Foreground.jpg to choose it (if you don’t see it, navigate into Desktop > Class Files > Adobe XD Class > Parallax Photos).
8. In the Layers panel, double–click on the top layer named Middleground and rename it to Foreground.

Adding a Mask

We’ll be moving the foreground up faster than the background, which will cause the bottom of the background to become visible. We can prevent that by adding a mask to the photos (and the text over the photo which we’ll also be animating).

1. Click on the top Foreground photo (refer to the Layers panel to make sure it’s selected).
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
3. In the Layers panel, rename the top Foreground layer to Mask.
4. We need to remove the photo from this shape to be able to use it as a mask. In the Property Inspector, click on the Fill color and choose white.
5. In the Layers panel, drag the The Islands of Hawaii layer below the Mask.
6. In the Layers panel, click on the Mask layer.
7. Hold Shift and click on Background layer.
8. Choose Object > Mask with Shape.
9. In the Layers panel, rename Mask Group 1 to parallax.

Building the Parallax Animation

To build the animation we need 2 artboards: 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 artboard, so let’s make the second.

1. Select the artboard by clicking on the artboard name Parallax Start (at the top left of the artboard).
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
3. Rename the new artboard by double–clicking the Parallax Start – 1 name at the top left and change it to Parallax End.
4. On the Parallax End artboard, double–click on the header photo to go into the parallax mask group.
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. In the Layers panel, select the Mask layer.

13. Drag the bottom resize handle so it snaps to the bottom of the Foreground layer.

    TIP: If it’s hard for you to see the bottom of the Foreground layer:

    • Hide the Middleground and Background layers (hover over the layer name in the Layers panel and click the eye icon).
    • Then move the bottom of the mask up to the bottom of the Foreground layer.
    • When done, show the Middleground and Background layers again.
14. Now let’s set up the animation. At the top left of the window click Prototype.
15. Click on the Parallax Start artboard name to select the artboard.
16. At the top the Property Inspector, to the far right of Interaction click the + button.

17. In the Property Inspector, set:

    • Trigger: Time
    • Delay: 1 s (we want to see the photo for a second before it start to animate)
    • Type: Auto-Animate
    • Destination: Parallax End
    • Easing: Ease In-Out
    • Duration: 4 s
18. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).

19. Wait a second and then the animation should happen automagically!

    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 preview window.
21. Drag the header photo (parallax) group up so its bottom just touches the top of the artboard. This way it’s fully off screen.
22. There’s text/photo content lower on the artboard. Drag that content up so the first paragraph looks nice below the navbar.
23. Click in an empty area of the canvas to sure nothing is selected.
24. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).

25. Wait a second and admire the final animation!