Parallax

Target

Headline

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

Units (Viewport)

Headline

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

Start + End (Reverse)

Headline

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

Easing

-3
-2
-1
-0.5
0
0.5
1
2
3

Color and Viewport

Headline

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

Filter

Headline

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

Multiple Steps

Headline

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

SVG Stroke

JavaScript Options

Option Value Default Description
easing Number 1 Animation easing during scrolling.
target String false Element dimension reference for animation duration.
viewport Number 1 Animation range depending on the viewport.
media Integer|String false Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).

Animated properties

You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)

Option Default Unit Description
x px Animate translateX.
y px Animate translateY.
bgy px Animate a background image (y-axis).
bgx px Animate a background image (x-axis).
rotate deg Animate rotation clockwise.
scale Animate scaling.
color Animate color (needs start and stop value).
background-color Animate background-color (needs start and stop value).
border-color Animate border color (needs start and stop value).
opacity Animate the opacity.
blur px Animate the blur filter.
hue deg Animate the hue rotation filter.
grayscale % Animate the grayscale filter.
invert % Animate the invert filter.
saturate % Animate the saturate filter.
sepia % Animate the sepia filter.
stroke Animate strokes within SVG images.