Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
| 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). |
You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)
| Option | Description |
|---|---|
x |
Animate translateX in pixels or percent. |
y |
Animate translateY in pixels or percent. |
bgy |
Animate a background image (y-axis). |
bgx |
Animate a background image (x-axis). |
rotate |
Animate rotation clockwise in degree. |
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 |
Animate the blur filter. |
hue |
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. |