Parallax Scroll

About

Parallax effects are a popular way to add depth to flat designs. The effect relies on movement: when a camera moves within a three-dimension scene, objects in the viewport will appear to move in the opposite direction. We call the rate of this movement the object’s parallax—and the closer an object is to the camera, the more parallax it will have as the camera moves.

When driven by a user’s scroll position, you can achieve a parallax effect by moving the design’s “background” elements at a slower rate than elements of the design’s “foreground”. As the user scrolls, the background objects will appear to have a smaller parallax, and the illusion of depth will be hard to miss.

Tips

The easiest way to achieve a parallax scroll effect in Framer is to use custom components, such as those shown in this example by Linton Ye. You will still need to make some decisions about how and when an item should respond to a scroll, but you’ll get the result without needing to code anything yourself.

With the Parallax: Scroll Effects package, you can use a ParallaxLayer’s parallax to drive changes to several properties, such as its rotation or opacity. The property will move between its Min to its Max, starting when the scroll’s position matches the provided Scroll Min value and ending when it matches the Scroll Max. You can learn more about a layer’s position by holding the Option key while hovering over the layer.