Parallax

Animation properties depending on the scroll position of the document.


  • Add an ID to a Background stack
  • Drop the Parallax stack into the Background stack and enter the Background ID at the target ID field.

Heading


Start and end values

Properties are always animated from their current value to the target value you set in options. However, you can also define a start value yourself. This is done by choosing two values in the options panel.
Note Use the Parallax foreground option for the layered content.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Multiple steps

Animate both x and y axis for two content areas.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Viewport position

Using the viewport option you can adjust the animation duration. The value defines how far inside the viewport the target element is scrolled until the animation is completed. With the value 1 or false, the animation lasts as long as the element is in the viewport (default behaviour). Setting it to 0.5, for example, animates the property until the scroll position reaches the middle of the target element.

Heading


Colors

Transition from one background color to another.

Heading


Filters

Heading


SVG Strokes

The Parallax component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. Here's how to do it:
  • Set the Parallax stack to Foreground and drop the SVG stack into it
  • On the Parallax stack regulate the stroke percentage
  • Use the viewport adjust to optimize the animation
missing image