Parallax
Common parallax effect. Elements move in different speeds, even when they aren't visible in the screen.
speed: 1/2
momentum: 0
mobile: disabled 1
momentum: 0
mobile: disabled 1
speed: 1/3
momentum: 0.5
mobile: enabled 2
momentum: 0.5
mobile: enabled 2
speed: 1/4
momentum: 1
mobile: enabled 3
momentum: 1
mobile: enabled 3
speed: -1/4
momentum: 0.3
mobile: disabled 4
momentum: 0.3
mobile: disabled 4
U
U
O
O
O
W
w
w
w
Parallax Scene
Limited parallax effect. Elements move for a limited time, defined by the scroll position.
speed: 1/2
momentum: 0
mobile: disabled 1
momentum: 0
mobile: disabled 1
speed: 1/3
momentum: 0.5
mobile: enabled 2
momentum: 0.5
mobile: enabled 2
speed: 1/4
momentum: 1
mobile: enabled 3
momentum: 1
mobile: enabled 3
U
U
O
O
O
W
w
w
w
Scene
The most common scene, with easing now.
ease: easeOutQuad
momentum: 0.5
momentum: 0.5
ease: easeOutQuad
momentum: 1
momentum: 1
ease: no ease
momentum: 0
momentum: 0
Pinned Scene
This scene keeps fixed in the screen for a while.
pinned element
mobile: disabled
mobile: disabled
Registered Scene
As data-* attributes can't cover eveything we want to do with scenes, we can apply custom behavior to them through registered scenes.
data-scene="pin-content"
Others
Some examples with animation properties.
Width and Height