This tutorial will teach you how to users drivers to create a parallax scroll effect on a webpage. More specifically, we’ll use three different layered elements to create the parallax effect: a forgeground, a midground, and a background. Moving these elements at different speeds is what creates the illusion of depth.

When you look at the full assets, you’ll notice that the extended height of the foreground, midground, and background get progressively smaller, respectively. In the actual implementation, however, the elements are masked by the surrounding web page, so you won’t notice the difference in height.

A little background about drivers: They connect properties to each other using keyframes and work within artboards rather than between them. Drivers are similar to an animation timeline, except they work based on a property rather than time. In this particular example, we’ll base our interaction on the Scroll Y property of the web page.

Using drivers is a bit more advanced, so if you’re new to Principle, I recommend starting with the Button Tap Gesture tutorial first.

Download the assets.

Download the Principle file.

___

Download the subtitles for this tutorial (.srt file).