Stagger

Delays that grow across a set of children, from the first, the last, the centre or any index: what a transition's delayChildren: stagger() and createAnimate's delay run on. Motion's stagger.

import * as Stagger from "@wardic/core/Stagger"

const delay = Stagger.make(0.05, { from: "center" })
delay(0, 5) // 0.1: the first of five is two steps from the centre

Interfaces

Options

A stagger's options, as Motion's stagger's.

Properties

ease?

readonly ease?: Definition;

How the delay grows across the children, eased across amount × total: an easing's name, a cubic Bézier's four numbers, or a function. Default linear.

from?

readonly from?: Origin;

The child the delay grows from. Default "first".

startDelay?

readonly startDelay?: number;

Seconds before the first child's delay: every delay starts from it. Default 0.

Type Aliases

Origin

type Origin = "first" | "last" | "center" | number;

The child a stagger grows from: "first", "last", "center", or an index.

Functions

make()

function make(amount, options?): (index, total) => number;

A stagger: a child's delay in seconds from its index and the count, startDelay plus amount for each step from from. With ease, the steps are eased across amount × total, as Motion's.

Parameters

amount

number

options?

Options = {}

Returns

(index, total) => number

Example

const delay = Stagger.make(0.1, { from: "last", ease: "easeOut" })
const delays = [0, 1, 2, 3].map((i) => delay(i, 4))