Sequence

Animation sequences, as Motion's: Segments laid out in time, compiled to one keyframes animation per subject and key, each stop placed in time over the whole sequence. A binding resolves each Segment's subjects and transitions, compiles once, and runs what comes back on its own animations.

  • Segments follow one another: each starts where the one before ended, unless its at says where. A label names a time a later Segment's at can give.
  • A key's transition places its stops in its Segment: its duration, its delay (a function of each subject's index and count, when it's one), its times and an ease per stretch. A repeat below 20 is unrolled into stops. A spring through two stops or fewer becomes an easing over the time it takes to rest, so a sequence is tweens all through.
  • A key's stops are its Segments' in time order, a later Segment's replacing the stops it overlaps. A Segment's single value starts from a null, the stop before it.
import * as Sequence from "@wardic/core/Sequence"

const animations = Sequence.compile([
  { subjects: [card], target: { x: 100 }, transitions: { x: { type: "tween", duration: 1 } } },
  "landed",
  { subjects: [badge], target: { opacity: 1 }, transitions: {}, at: "landed" },
])
animations.get(card) // { keyframes: { x: [null, 100] }, transition: { x: { … } } }

Its exports also name types the module doesn't export: its internal types.

Interfaces

Animation

A subject's animation: each key's stops, and the tween it runs them on, its times over the whole sequence.

Properties

keyframes
readonly keyframes: Readonly<Record<string, ReadonlyArray<Stop>>>;

Each key's stops over the whole sequence.

transition
readonly transition: Readonly<Record<string, KeyframesTransition>>;

Each key's tween through them: its duration the sequence's, its times placing each stop.

Label

A label with its own time (Motion's SequenceLabelWithTime): { name: "fade", at: "-0.2" }.

Properties

at
readonly at: Time;
name
readonly name: string;

Segment

A Segment (Motion's [subject, keyframes, transition]): its subjects, each key's value or stops, each key's transition (a key without one runs on a 0.3 s easeOut tween), and where it starts.

Type Parameters

S

S

Properties

at?
readonly at?: Time;

Where it starts: after the Segment before, when left out.

subjects
readonly subjects: readonly S[];

What it animates: elements, or anything a binding animates, such as a callback's value.

target
readonly target: Readonly<Record<string, Stop | ReadonlyArray<Stop>>>;

Each key's value, or its stops.

transitions
readonly transitions: Readonly<Record<string, Transition>>;

Each key's transition, as the binding resolved it; a key with none runs on a 0.3 s easeOut tween.

Type Aliases

Delay

type Delay = number | ((index, count) => number);

A Segment's delay (Motion's): seconds, or each subject's, by its index in the Segment and their count.

Options

type Options = { readonly [K in "duration" | "delay" | "repeat" | "repeatType" | "repeatDelay"]?: KeyframesOptions[K] };

A whole sequence's options (Motion's SequenceOptions), laid over each key's animation: its duration (the whole sequence scaled to it), delay, and repeat, repeatType and repeatDelay.

Step

type Step<S> = string | Label | Segment<S>;

A sequence's step: a label at the end of the Segment before, a label with its own time, or a Segment.

Type Parameters

S

S

Stop

type Stop = number | string | null;

One of a key's stops: a value, or null, the stop before it (the key's value now, first).

Time

type Time = number | string;

Where a Segment starts, or a label's time (Motion's SequenceTime): seconds into the sequence; "+0.5" / "-0.5" after or before the end of the Segment before; "<" at that Segment's start, "<+0.5" / "<-0.5" around it; or a label's name, its time (an unknown one, the end of the Segment before). Never before 0.

Transition

type Transition = 
  | object & Omit<SpringOptions, "delay" | "from"> & Omit<KeyframesOptions, "delay" | "duration" | "ease"> & Placing
  | object & Omit<KeyframesOptions, "delay"> & Placing;

One key's transition in a Segment: a spring or a tween, as the binding resolves the Segment's own for the key, with its delay, times and repeat. A spring through two stops or fewer is sampled into an easing; through more it runs as a tween of its duration (0.3 s), as Motion's.

Variables

MAX_REPEAT

const MAX_REPEAT: 20 = 20;

A Segment's repeat at or above this is left out, as Motion's (MAX_REPEAT): the stops would explode.

Functions

compile()

function compile<S>(steps, options?): ReadonlyMap<S, Animation>;

Compiles a sequence: each subject's animation, in the order the subjects first appear, each of its keys through its stops on one tween over the whole sequence, with options laid over each. Run each subject's animation as keyframes, all started together.

Type Parameters

S

S

Parameters

steps

readonly Step<S>[]

options?

Options = NO_OPTIONS

Returns

ReadonlyMap<S, Animation>

Example

const animations = Sequence.compile(steps, { repeat: 1, repeatType: "reverse" })
for (const [subject, animation] of animations) play(subject, animation)