Dean Dapkus is a Creative Director on the Adobe Studio team. He enjoys digital and traditional art and is happiest when he can combine the two in new ways.
Once Dapkus completed the initial web page design, he prepped it to add a parallax animation — the effect of moving elements at different speeds and directions. He duplicated the artboard by clicking the artboard name and pressing Control+D (Windows) or Command+D (macOS) on his keyboard. Then he double-clicked the new artboard name and renamed it. Duplicating an artboard keeps the layer names the same on each artboard, which is necessary when animating in XD.
Dapkus moved the objects on the first artboard into their starting positions. He opened the Layers panel and selected the End_chairs layer (the image of the three chairs). Then, he held Shift and dragged the image to the bottom of the artboard until the top edge snapped into place at the bottom. Holding Shift while dragging allowed Dapkus to move objects in a straight line.
Still on the first artboard, Dapkus expanded the Exclusion layer and its sublayers. He clicked on the Window layer inside the Repeat Grid and pulled down on the top-middle handle of the rectangle to resize it to a height of 1 pixel. This positioned the resized rectangles at the bottom of the repeat grid. He then held Shift and dragged to constrain the selection vertically, so he could move the shortened rectangle about 200 pixels below the artboard. Notice in the Layers panel that the object is still part of the Start artboard because it is part of a layer group that is still on the artboard.
To blur the background as the new image animated in, Dapkus clicked the Blur rectangle inside the same Exclusion group and set the Opacity to 0% in the Property Inspector.
To finish prepping the first artboard, Dapkus moved the menu options so that the type would move up as it animated into view. He clicked inside the Navigation layer group to find the Categories group. He selected it and held Shift as he dragged it below the word Modern in the header.
Dapkus then moved on to the End artboard. He selected the Start_Chairs layer, the image with the 4 chairs, and held Shift as he dragged it above the artboard. He held Shift again as he dragged the top-middle handle down to resize it from the center to 1920 pixels and lowered the Opacity to 20%.
Still on the End artboard, Dapkus selected the Black Background layer and reduced the Opacity to 0%. The final effect results in a transition that appears to grow lighter as it animates to the next artboard.
When Dapkus was ready to preview the parallax animation, he clicked Prototype at the top of the screen. Then he selected the Start artboard and dragged a wire to the End artboard. In the Property Inspector, he set the Trigger to Keys and Gamepad and pressed the down arrow in the Key field. He set the Action to Auto-Animate and defined the rest of the motion settings. When presenting the prototype, Dapkus will initiate the animation by hitting the down arrow with one hand and simulating a swipe gesture with the other.