Parallax
Animation properties depending on the scroll position of the document.
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.
NoteUse the Parallax foreground option for the layered content.
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.
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.
Colors
Transition from one background color to another.
Filters
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