Hey, in this video, I’m going to show you
how to use drivers to make a parallax scroll effect.
Let’s get started.
Open the Principle file and set the artboard
size to a width of 1024 and a height of 1012
so that the hero image on the website image
asset fits full screen.
Align the assets like so, with the foreground,
midground, and background assets top-aligned
to the empty section of the website image,
or a Y of 1530.
The assets should be in this order,
with the website image on top to mask the three parallax scroll elements.
Group the elements together and change the
vertical setting from static to scroll.
Drag the blue outline bordering the website
folder up to match the artboard height.
Now you’ll be able to scroll in the viewer.
Open the “Drivers” section at the top.
Drivers connect properties to each other using
keyframes, and work within artboards.
You'll see that the Scroll Y property of our
folder appears here by default, which is perfect.
Select all three parallax scroll elements
and tap the plus button to reveal the property manipulation options.
Tap the Y property.
Drag the keyframe to the right, until just
before the parallax section appears,
at about the 510 mark.
Add a keyframe here for each of the elements.
To create the illusion of depth,
we want the three parallax scroll elements to move along the Y axis,
just at different speeds, while
we scroll through the website.
Keep scrolling along to add another keyframe
when the elements are out of view,
at about the 2255 mark.
Now, we want to change the end state locations
of each.
Let’s start with the foreground element,
which we want to move the “fastest”
in the parallax effect, and therefore the most.
Select it, and move it up until the bottom
of the asset is in line
with the bottom of the web section.
As long as our marker is set on this end keyframe,
any adjustments we make will be automatically updated.
Select the midground element and do the same
thing.
Lastly, let’s do the same thing with the
background element, which will only move just slightly.
Check it out in your viewer, and that’s
it!
