Documentation
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.
NoteUse 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.
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.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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
