01 / 06
Fade
Fades in, with an optional 100 px move.
data-ros="fade-up"
01fade
02fade-up
03fade-down
04fade-left
05fade-right
06fade-up-right
07fade-up-left
08fade-down-right
09fade-down-left
02 / 06
Zoom
Scales from 60% or 120% while fading in.
data-ros="zoom-in"
01zoom-in
02zoom-in-up
03zoom-in-down
04zoom-in-left
05zoom-in-right
06zoom-out
07zoom-out-up
08zoom-out-down
09zoom-out-left
10zoom-out-right
03 / 06
Flip
Rotates into place around the horizontal or vertical axis.
data-ros="flip-left"
01flip-up
02flip-down
03flip-left
04flip-right
04 / 06
Slide
Moves in by its own size. Here each one sits in a box with overflow: hidden.
data-ros="slide-up"
01slide-up
02slide-down
03slide-left
04slide-right
05 / 06
Options
Set any option on one element, or for the whole page in ROS.init().
data-ros-delay="150"
delay0 ms
delay150 ms
delay300 ms
duration1500 ms
easingease-out-back
easingany CSS curve
anchor-placementcenter-center
onceonly the first time
mirrorout through the top
06 / 06
Scrubbed
With data-ros-scrub the animation follows the scroll position, driven by the
browser itself.
data-ros-scrub
01fade-up
02zoom-in
03flip-left