Contents
stagger
is used to offset the start time of each animation.
stagger(duration, options)
When defining an animation with one or more elements, delay
can be set with the stagger
function to delay each element's animation by a specific duration:
import { animate, stagger } from "motion" animate("li", { x: 100 }, { delay: stagger(0.1) })
Options
start
Default: 0
stagger(0.1, { start: 0.2 }) // 0.2, 0.3, 0.4...
from
Default: "first"
Specifies an element position from which to stagger. Can be set as "first"
, "center"
, "last"
, or a number to specify an index.
animate( [a, b, c], { x: 100 }, { delay: stagger(0.1, { from: "last" }) } // 0.2, 0.1, 0 )
easing
Default: "linear"
Applies easing to the duration
so the interval between delays becomes longer or shorter over each animation.
Can be set in the same way as animate
easing
option, or as an easing function.
animate( "li", { opacity: 1 }, { delay: stagger(0.2, { easing: "ease-out" }) } );
Have you seen Motion DevTools?
It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!