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 master Adobe XD's auto-animate feature to create compelling parallax animations that add depth and visual interest to your digital designs. Parallax effects remain a cornerstone of modern web and app design, providing that essential sense of dimensionality that elevates user experience beyond flat, static interfaces.

Setting up a Parallax Photo

Parallax animations create the illusion of depth by moving multiple visual layers at different velocities. This technique mimics natural visual perception: background elements (representing distant objects) move slowly, while foreground layers move progressively faster to simulate proximity. The effect creates an engaging sense of three-dimensional space within your two-dimensional design.

The most technically challenging aspect of parallax animation lies in the Photoshop preparation work. Professional parallax effects require each visual layer to be meticulously separated with unwanted elements removed and transparency properly maintained. We've streamlined this process for you, but understanding the workflow is crucial: each layer must be exported as a PNG file to preserve transparency when imported into XD. Below you'll see our three carefully prepared layers: background, middleground, and foreground elements that will create the final parallax effect:

Now let's begin building your parallax animation by setting up the foundational elements:

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.

   You'll notice we've already imported the background photograph to give you a starting point. Now we need to layer in the middleground and foreground elements that will create the parallax depth effect.

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).

While the artboard appears unchanged (the duplicate sits in the exact same position as the original), the Layers panel now shows two Background layers. This duplication technique allows us to maintain consistent positioning while replacing the content—a essential workflow for complex layered animations.

1. CTRL–click (Mac) or Right–click (Windows) on the header photo and choose Replace Image.
2. Navigate into Desktop > Class Files > Adobe XD Class > Parallax Photos and double–click on Middleground.jpg to choose it.
3. In the Layers panel, double–click on the top layer named Background and rename it to Middleground.
4. Let's repeat this process for the foreground photo. With the Middleground photo still selected, duplicate it by hitting Cmd–D (Mac) or CTRL–D (Windows).
5. CTRL–click (Mac) or Right–click (Windows) on the header photo and choose Replace Image.
6. Double–click on Foreground.jpg to choose it (if you don't see it, navigate into Desktop > Class Files > Adobe XD Class > Parallax Photos).
7. In the Layers panel, double–click on the top layer named Middleground and rename it to Foreground.

Adding a Mask

Professional parallax animations require careful masking to prevent visual artifacts. As our foreground elements move upward faster than background layers, portions of the background would become visible at the bottom edge—breaking the illusion. By creating a mask that encompasses both the photos and overlaid text elements, we maintain clean boundaries throughout the animation sequence.

1. Click on the top Foreground photo (refer to the Layers panel to confirm your selection).
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 convert this photo shape into a masking element. 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

Now comes the exciting part: bringing your carefully prepared layers to life through Adobe XD's powerful auto-animate feature. Effective parallax animation relies on creating two distinct states—the initial position and the final position—then letting XD interpolate the smooth motion between them. This approach gives you precise control over timing and easing while maintaining the fluid, natural movement that makes parallax effects so engaging.

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 enter 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 establish the base movement for our background elements. 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 difficult to see the bottom edge of the Foreground layer:

    • Temporarily hide the Middleground and Background layers (hover over the layer name in the Layers panel and click the eye icon).
    • Adjust the bottom of the mask to align with the bottom of the Foreground layer.
    • Make the Middleground and Background layers visible again.
14. Now we'll configure the animation parameters. 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, configure these settings for optimal parallax timing:

    • Trigger: Time
    • Delay: 1 s (allows viewers to absorb the initial composition before animation begins)
    • 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 moment and watch as your parallax animation comes to life!

    The deliberately slow timing allows you to observe how each layer moves at its designated speed, creating that coveted depth effect. For the finishing touch, we'll position the entire composition to simulate the natural scrolling experience users expect.

20. Close the preview window.
21. Drag the header photo (parallax) group upward until its bottom edge aligns with the top of the artboard, positioning it completely off-screen initially.
22. Locate the text and photo content lower on the artboard. Drag this content upward so the first paragraph creates an aesthetically pleasing layout below the navigation bar.
23. Click in an empty area of the canvas to deselect all elements.
24. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or CTRL–Enter (Windows).

25. Experience your completed parallax animation—a professional-grade effect that demonstrates the sophisticated motion design capabilities possible within Adobe XD!