vysmo
@vysmo/text Library DOM

Text for the modern web.

Multi-property choreographed text animation. splitText (grapheme-safe via Intl.Segmenter) + animateText (single master clock, back-fill, repeat). 229 generated + 14 curated presets across enter, exit, and emphasis.

  • 243 presets
  • ~3 KB gzipped
  • Intl.Segmenter grapheme-safe split
  • tree-shakable import what you ship
$ pnpm add @vysmo/text View on GitHub

Install

One package. @vysmo/text consumes @vysmo/animations and @vysmo/easings at the workspace level — you only install the one. Tree-shakable to the byte.

pnpm add @vysmo/text npm install @vysmo/text yarn add @vysmo/text

Zero runtime dependencies, SSR-safe at module load, every preset is its own module. Importing only the presets you ship keeps the catalog out of your bundle.

Quick start

A preset and an element — animateText handles the split, the per-slice clocks, the master timeline, and reduced-motion fall-through. 

import { animateText } from "@vysmo/text";

// 1. The simplest version: a named preset, autoplay on mount.
animateText(element, { preset: "enter/fade-up" });

// 2. Override any knob you want. Unset options inherit from the
//    preset's tuned defaults.
animateText(element, {
  preset: "enter/elastic-rise",
  split: "word",     // preset default "character"
  stagger: 60,       // preset default 30
  delay: 200,        // wait before starting
});

// 3. The handle gives you imperative control after construction.
const handle = animateText(element, {
  preset: "emphasis/shake",
  autoPlay: false,
  repeat: 3,
  repeatDelay: 400,
});
element.addEventListener("click", () => handle.play());

Three patterns. By name — pass a string, every preset in the catalog ships. By reference — import { fadeUp } from "@vysmo/text" and only that preset's data ships. Imperative — pass autoPlay: false and use the returned handle's play() / pause() / stop() / seek().

Using with React

Drop-in <AnimateText> component that wraps splitText + animateText with declarative props (preset, split, stagger, repeat) plus a useAnimateText hook for animating refs you don't own.

Install pnpm add @vysmo/text @vysmo/text-react 
import { AnimateText } from "@vysmo/text-react";

export function Hero() {
  return (
    <AnimateText as="h1" preset="enter/fade-up">
      Hello world
    </AnimateText>
  );
}
Full props + advanced patterns on npm

Concepts

A short mental model. Skip if you've already played with the catalog.

Split is grapheme-safe

splitText uses Intl.Segmenter when available, falling back to Array.from(text) for ASCII / single-codepoint runs. Emoji clusters, regional flags, and combining marks all stay together. Word and line modes use the same Segmenter for proper word boundaries across locales. Character mode breaks shaping in connected scripts (Arabic, Devanagari, Lao, Khmer, …) — use word or line for those.

One master clock

Every slice is animated against the same time origin, with per-slice offsets computed from the stagger and stagger order. That keeps the master timeline coherent: pause and everything pauses at the right phase, seek and slices land where they should. No slice has its own ticker.

Multi-property choreography

A spec is { prop, from, to, duration?, delay?, ease?, stagger?, staggerOrder? }. Add as many as you want; they all compose into one transform + filter + opacity string per slice per frame. Per-spec stagger / staggerOrder let different properties have different cadences — opacity sweeping fast, translateY trailing slowly behind it.

Stagger order shapes the feel

"start" (left → right), "end" (right → left), "center" (middle outward), "edges" (both ends meet in the middle), "random". Order is the cheapest knob you have to turn an enter preset from energetic to thoughtful — the playground exposes it; the studio randomises it.

Tree-shaking is real

Each preset is its own module export. Importing { fadeUp } alone ships only that preset's data; the other 14 stay out. Importing { animateText } with a string preset name pulls the registry — pick by reference when bundle size matters.

Reduced motion respected by default

When prefers-reduced-motion: reduce is set, animateText snaps slices to their end state and resolves finished immediately. No bouncing, no spinning, no scrambling. Pass respectReducedMotion: false only when motion is the literal point of the page.

API reference

Two top-level functions, one handle, plain-data presets, plain-data specs.

Exports

Two animation entry points (animateText and splitText), four helpers, and the 15 preset objects. Pass preset objects directly for tree-shaking. 

import {
  animateText,         // run a preset (or raw spec list) on an element
  splitText,           // grapheme-safe split by character / word / line
  applyProps,          // imperative per-slice transform/filter/opacity composer
  clearProps,          // strip the inline style applyProps wrote
  computeStaggerDelays, // pure helper that yields the per-slice offset table
  evaluateSpecs,       // pure time-point evaluator for tests + headless render
  listPresets,         // every preset name in the catalog
  resolvePreset,       // PresetName → Preset object
} from "@vysmo/text";

// Direct preset imports for tree-shaking — only this preset ships:
import {
  fadeUp, elasticRise, blurIn, scaleIn, flipX, depthZoom,        // enter
  fadeDown, scaleOut, flipAway,                                  // exit
  pulse, shake, wobble, coinFlip, spin,                          // emphasis
} from "@vysmo/text";

animateText(el, options)

The main entry point. Splits the text, builds the per-slice spec plans, starts the master clock. Returns a handle for imperative control. 

import type {
  AnimateTextOptions,
  AnimateTextHandle,
  PresetName,
  Preset,
  SplitMode,
  StaggerOrder,
  TextAnimationSpec,
  TextProperty,
} from "@vysmo/text";

interface AnimateTextOptions {
  // Granularity of the split. Default "character" (most presets tuned
  // against character — but pickable per call).
  split?: SplitMode;            // "character" | "word" | "line"
  // BCP-47 locale for Intl.Segmenter (RTL / connected scripts).
  locale?: string;
  // Milliseconds between consecutive slices starting. Default 30.
  stagger?: number;
  // Order in which slices receive the stagger offset. Default "start".
  staggerOrder?: StaggerOrder;  // "start" | "end" | "center" | "edges" | "random"
  // One or more animated properties running in parallel per slice.
  // Skip if you supply a preset.
  animations?: TextAnimationSpec[];
  // Preset by name (full catalog) or by reference (tree-shaken).
  preset?: PresetName | Preset;
  // CSS perspective + perspective-origin on the container so 3D
  // transforms render with depth.
  perspective?: number;
  perspectiveOrigin?: string;
  // CSS transform-origin applied to every slice.
  transformOrigin?: string;
  // Begin playing on construction. Default true.
  autoPlay?: boolean;
  // Skip animation when prefers-reduced-motion is set. Default true.
  respectReducedMotion?: boolean;
  // Delay (ms) before the first play begins.
  delay?: number;
  // Cycle count: 1 (default) | n | "infinite". Pulse-style emphasis
  // typically wants `repeat: 3, repeatDelay: 400`.
  repeat?: number | "infinite";
  // Gap between cycles in ms. Default 0.
  repeatDelay?: number;
}

interface AnimateTextHandle {
  play(): AnimateTextHandle;
  pause(): AnimateTextHandle;
  stop(): AnimateTextHandle;            // also restores un-animated style
  seek(progress: number): AnimateTextHandle; // 0 → 1
  readonly finished: Promise<void>;
  readonly splits: Splits;              // call splits.restore() to undo split
}

splitText(el, options)

The lower-level building block. Returns the per-slice HTMLElement[] plus a restore() method. Reach for this when you'd rather drive the animation yourself with another library or a custom timeline. 

import { splitText } from "@vysmo/text";

// Lower-level helper for when you'd rather drive the animation
// yourself. Returns a Splits object; the original text is restorable
// via splits.restore().
const splits = splitText(element, {
  mode: "word",            // "character" | "word" | "line"; default "character"
  locale: "en",            // BCP-47 for Intl.Segmenter
});

splits.slices;             // HTMLElement[]   — per-slice spans
splits.mode;               // the granularity it ran with
splits.original;           // string          — pre-split content
splits.restore();          // idempotent reset

// Use any animation library on splits.slices, or feed them through
// applyProps()/clearProps() if you want the same per-frame composer
// that animateText uses internally.

Preset & TextAnimationSpec

Plain data, no inheritance, no surprises. Every preset in the catalog is an instance of Preset; author your own with the same shape and they slot in alongside the built-ins. 

import { fadeUp } from "@vysmo/text";

// A Preset is plain data — every catalog entry is an instance of
// this shape. Author your own with the same contract; it composes
// freely with the runtime.
interface Preset {
  name: PresetName;
  split?: SplitMode;        // granularity this preset was tuned for
  stagger: number;          // default ms between slices
  staggerOrder?: StaggerOrder;
  animations: TextAnimationSpec[];
  perspective?: number;     // container CSS perspective for 3D transforms
  transformOrigin?: string; // applied to every slice
  repeat?: number | "infinite";
  repeatDelay?: number;
}

interface TextAnimationSpec {
  prop: TextProperty;       // opacity | translateX/Y/Z | scale | rotate*
                            //   | skewX/Y | blur | brightness | contrast
                            //   | saturate | hueRotate
  from: number;
  to: number;
  duration?: number;        // ms; default 600
  delay?: number;           // ms from slice's stagger offset
  ease?: (t: number) => number;
  // Per-spec stagger / order — different cadences per property.
  stagger?: number;
  staggerOrder?: StaggerOrder;
}

Catalog

All 243 presets across enter, exit, and emphasis. Pick a preset to inspect its split mode, stagger, and per-property animation table — same data the playground and Studio use.

enter/bloom-scatter
split: characterstagger: 25msperspective: 550
Prop
From
To
Duration
Ease
opacity
0
1
300
back.out
translateZ
-450
0
550
sine.out
scale
0.6
1
800
expo.out
blur
11
0
700
power4.out
translateX
-386.162..386.162
0
850
cubic.out
enter/blur-in
split: wordstagger: 60ms
Prop
From
To
Duration
Ease
opacity
0
1
500
sine.out
blur
8
0
500
sine.out
enter/blur-rise-snap
split: characterstagger: 25msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
300
bounce.out
blur
7
0
750
expo.out
enter/compress-y-scatter
split: characterstagger: 60ms
Prop
From
To
Duration
Ease
opacity
0
1
550
linear
scaleY
0.28..3.5
1
900
linear
enter/depth-zoom
split: characterstagger: 35msperspective: 900
Prop
From
To
Duration
Ease
opacity
0
1
500
power2.out
translateZ
-400
0
700
power3.out
enter/drop-scatter-bounce-word
split: wordstagger: 45ms
Prop
From
To
Duration
Ease
opacity
0
1
550
anticipate.out
skewX
25
0
700
bounce.out
blur
2..25
0
800
expo.out
scaleY
0.1
1
850
power4.out
translateY
-990.632..990.632
0
600
elastic.out
enter/elastic-rise
split: characterstagger: 40ms
Prop
From
To
Duration
Ease
opacity
0
1
400
power2.out
translateY
40
0
800
elastic.out
enter/expand-scatter
split: characterstagger: 20msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
450
expo.out
translateX
-150
0
650
power4.out
scale
0.11..1.375
1
850
bounce.out
blur
2.4..30
0
400
sine.out
enter/expand-scatter-loose
split: characterstagger: 30msorder: endperspective: 300
Prop
From
To
Duration
Ease
opacity
0
1
500
back.out
translateX
-436.997..436.997
0
900
bounce.out
scale
0.09..1.125
1
850
circ.out
translateZ
-400
0
750
elastic.out
translateY
-150
0
700
power4.out
enter/expand-scatter-trail
split: characterstagger: 40msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
300
quart.out
translateY
-66.362..66.362
0
550
bounce.out
scale
0.65
1
600
cubic.out
enter/expand-snap
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
500
circ.out
translateX
70
0
600
elastic.out
scale
0.75
1
550
expo.out
enter/extend-x-curl
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
0
1
350
cubic.out
scaleX
-1
1
750
back.out
translateY
190
0
750
bounce.out
scaleY
3
1
600
back.out
skewX
35
0
550
elastic.out
enter/extend-x-snap
split: wordstagger: 45ms
Prop
From
To
Duration
Ease
opacity
0
1
500
quart.out
scaleX
0.7
1
900
expo.out
translateX
-60
0
600
back.out
blur
9
0
600
bounce.out
enter/extend-x-snap-word
split: wordstagger: 50msorder: edgesperspective: 350
Prop
From
To
Duration
Ease
opacity
0
1
350
bounce.out
scaleX
-1
1
800
expo.out
translateY
130
0
550
back.out
translateZ
-350
0
850
sine.out
enter/extend-y-curl
split: characterstagger: 60msperspective: 550
Prop
From
To
Duration
Ease
opacity
0
1
550
expo.out
scale
0.75
1
750
expo.out
translateZ
-350
0
600
expo.out
scaleY
3
1
550
back.out
enter/extend-y-scatter
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
450
circ.out
translateX
-111.159..111.159
0
600
expo.out
scaleY
0.08..1
1
850
back.out
translateY
-91.85..91.85
0
850
back.out
enter/extend-y-scatter-curl
split: characterstagger: 45ms
Prop
From
To
Duration
Ease
opacity
0
1
400
power4.out
blur
3.2..40
0
750
elastic.out
translateY
-1510.445..1510.445
0
600
cubic.out
scaleY
0.04..0.5
1
850
sine.out
scale
0.08..1
1
800
quart.out
enter/extend-y-scatter-word
split: wordstagger: 40ms
Prop
From
To
Duration
Ease
opacity
0
1
400
cubic.out
skewX
-15
0
600
cubic.out
translateY
-50
0
600
bounce.out
scaleY
0.24..3
1
700
sine.out
enter/fade-up
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
0
1
500
power2.out
translateY
20
0
500
power2.out
enter/flip-up-scatter-bounce
split: characterstagger: 55msorder: edgesperspective: 500origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
circ.out
rotateY
-558.321..558.321
0
550
quart.out
rotateX
420
0
800
bounce.out
enter/flip-up-scatter-curl
split: characterstagger: 40msperspective: 500origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
450
sine.out
scaleY
3
1
550
quart.out
scale
0.14..1.75
1
800
quart.out
translateX
170
0
750
power4.out
rotateX
390
0
750
quart.out
skewX
30
0
650
bounce.out
enter/flip-up-scatter-word
split: wordstagger: 45msperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
350
back.out
rotateX
120
0
500
bounce.out
rotateY
-120
0
600
cubic.out
skewX
-173.156..173.156
0
450
elastic.out
blur
3.4..42.5
0
500
sine.out
enter/flip-up-spring
split: characterstagger: 50msorder: edgesperspective: 1000origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
elastic.out
rotateY
-30
0
850
expo.out
rotateX
60
0
900
elastic.out
enter/flip-x
split: characterstagger: 40msperspective: 800origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
400
power2.out
rotateX
-90
0
700
back.out
enter/fold-in-curl
split: characterstagger: 60msorder: endperspective: 500origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
550
cubic.out
rotateX
-360
0
850
expo.out
skewX
-40
0
500
quart.out
blur
16
0
600
back.out
scaleY
4
1
650
cubic.out
scale
0.3
1
850
sine.out
rotate
270
0
650
quart.out
enter/fold-in-scatter-bounce
split: characterstagger: 30msperspective: 200origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
500
cubic.out
scaleY
0.8..10
1
500
elastic.out
translateY
-467.605..467.605
0
550
quart.out
scale
0.14..1.75
1
900
sine.out
skewX
-116.824..116.824
0
600
expo.out
rotateY
-1011.538..1011.538
0
850
circ.out
rotateX
-380.842..380.842
0
500
bounce.out
enter/fold-in-scatter-curl
split: characterstagger: 20msperspective: 550origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
500
circ.out
translateZ
-300
0
850
bounce.out
scaleY
-1
1
750
bounce.out
rotateX
150
0
900
elastic.out
translateY
-871.977..871.977
0
600
elastic.out
translateX
-502.407..502.407
0
800
power4.out
enter/fold-in-scatter-snap
split: characterstagger: 55msperspective: 350origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
550
circ.out
rotateX
-3799.954..3799.954
0
600
expo.out
scale
0.1..1.25
1
550
circ.out
translateX
200
0
700
sine.out
scaleY
0.6..7.5
1
550
expo.out
rotate
-7028.788..7028.788
0
750
expo.out
enter/glide-outward
split: characterstagger: 55msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
550
sine.out
translateX
-30
0
750
sine.out
skewX
-15
0
400
bounce.out
enter/glide-scatter
split: wordstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
350
quart.out
translateX
-101.332..101.332
0
700
elastic.out
enter/grow-scatter
split: characterstagger: 50msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
450
expo.out
blur
2.6..32.5
0
550
elastic.out
scale
0.35
1
750
back.out
skewX
-15
0
500
elastic.out
translateX
-150
0
550
circ.out
enter/grow-spring
split: characterstagger: 25msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
300
circ.out
scale
0.25
1
800
elastic.out
enter/haze-outward
split: characterstagger: 50msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
350
circ.out
blur
4
0
400
sine.out
enter/haze-scatter
split: characterstagger: 20msperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
rotateY
210
0
750
linear
blur
2.4..30
0
700
linear
scaleY
2.5
1
850
linear
enter/haze-scatter-2
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
0
1
450
power3.out
blur
1.6..20
0
750
power3.out
translateX
80
0
650
sine.out
scaleX
0.1
1
850
circ.out
scaleY
0
1
900
anticipate.out
enter/haze-scatter-3
split: characterstagger: 60msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
350
expo.out
blur
9
0
500
sine.out
scale
0.13..1.625
1
750
expo.out
scaleY
0.1
1
600
anticipate.out
enter/haze-scatter-spring
split: characterstagger: 20msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
350
power1.out
translateY
140
0
650
elastic.out
blur
3.4..42.5
0
550
expo.out
enter/haze-snap
split: characterstagger: 60msorder: centerperspective: 500
Prop
From
To
Duration
Ease
opacity
0
1
400
back.out
blur
17
0
650
expo.out
translateZ
-300
0
550
back.out
enter/lean-in-scatter-curl
split: characterstagger: 20msorder: centerperspective: 700
Prop
From
To
Duration
Ease
opacity
0
1
450
power4.out
translateZ
-200
0
650
cubic.out
rotate
-2542.059..2542.059
0
500
sine.out
enter/lean-in-scatter-spring
split: characterstagger: 40msorder: centerperspective: 250
Prop
From
To
Duration
Ease
opacity
0
1
600
cubic.out
scaleX
0..0
1
800
sine.out
skewX
-107.905..107.905
0
500
back.out
translateZ
-350
0
500
quart.out
rotate
-2472.335..2472.335
0
900
elastic.out
translateY
-736.506..736.506
0
900
power4.out
enter/lean-in-spring
split: characterstagger: 40msorder: endperspective: 1100
Prop
From
To
Duration
Ease
opacity
0
1
500
expo.out
translateZ
-150
0
750
quart.out
rotate
30
0
850
elastic.out
scaleX
1.4
1
800
bounce.out
enter/lean-scatter
split: characterstagger: 45msorder: edges
Prop
From
To
Duration
Ease
opacity
0
1
400
circ.out
skewX
-92.865..92.865
0
600
quart.out
blur
17
0
750
bounce.out
enter/lift-spring
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
0
1
500
sine.out
translateY
-60
0
550
elastic.out
enter/loom
split: characterstagger: 50msperspective: 1100
Prop
From
To
Duration
Ease
opacity
0
1
550
back.out
translateY
-40
0
750
quart.out
translateZ
-150
0
750
quart.out
enter/pinwheel-scatter
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
opacity
0
1
450
expo.out
blur
3.2..40
0
700
bounce.out
scaleY
0.3..3.75
1
750
quart.out
skewX
-169.217..169.217
0
600
back.out
translateX
-100
0
850
power4.out
rotate
660
0
900
elastic.out
enter/pivot-curl
split: characterstagger: 55msperspective: 650origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
450
sine.out
scaleY
0.1
1
700
quart.out
rotateY
-420
0
750
sine.out
blur
7
0
750
power4.out
translateY
-180
0
750
power4.out
enter/pivot-scatter
split: characterstagger: 55msperspective: 700origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
400
elastic.out
rotateY
-1223.071..1223.071
0
850
expo.out
scale
0.12..1.5
1
650
bounce.out
translateZ
-450
0
750
sine.out
translateY
130
0
900
elastic.out
enter/pivot-scatter-2
split: characterstagger: 40msperspective: 550
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
translateZ
-350
0
500
linear
rotate
-330
0
550
linear
scaleX
0.5..6.25
1
650
linear
blur
7
0
550
linear
translateY
160
0
750
linear
enter/rise-y-scatter
split: wordstagger: 40ms
Prop
From
To
Duration
Ease
opacity
0
1
500
circ.out
blur
12
0
800
cubic.out
skewX
-145.334..145.334
0
500
cubic.out
scaleY
3
1
850
back.out
enter/rise-y-scatter-curl
split: characterstagger: 25ms
Prop
From
To
Duration
Ease
opacity
0
1
550
sine.out
scale
0.65
1
750
power4.out
scaleY
0.04..0.5
1
700
elastic.out
skewX
-193.342..193.342
0
600
sine.out
translateX
-210
0
750
expo.out
blur
3.2..40
0
750
circ.out
enter/rise-y-scatter-loose
split: characterstagger: 15msorder: edges
Prop
From
To
Duration
Ease
opacity
0
1
300
back.out
scaleY
0.5..6.25
1
600
cubic.out
blur
5.2..65
0
600
sine.out
skewX
-382.518..382.518
0
600
power4.out
scale
0.12..1.5
1
900
sine.out
enter/rotate-y-in-deep
split: characterstagger: 30msorder: randomperspective: 900origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
600
bounce.out
rotate
30
0
500
quart.out
rotateY
-60
0
600
circ.out
enter/rotate-y-in-inward
split: characterstagger: 30msorder: edgesperspective: 950origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
600
quart.out
blur
7
0
750
quart.out
rotateY
-30
0
650
power4.out
enter/rotate-y-in-scatter-curl
split: characterstagger: 60msorder: edgesperspective: 150origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
450
cubic.out
translateZ
-800
0
800
sine.out
rotateY
-1389.565..1389.565
0
800
expo.out
scale
0.13..1.625
1
650
bounce.out
scaleY
0.3..3.75
1
600
elastic.out
translateX
-2706.139..2706.139
0
650
circ.out
rotate
-1741.121..1741.121
0
550
back.out
enter/rotate-y-in-scatter-spring
split: characterstagger: 40msorder: edgesperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
500
power4.out
rotate
-2158.772..2158.772
0
650
sine.out
rotateY
-510
0
850
elastic.out
blur
15
0
750
bounce.out
translateZ
-250
0
650
expo.out
scaleX
0.3..3.75
1
800
back.out
enter/scale-in
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
300
power2.out
scale
0.3
1
600
back.out
enter/settle-scatter
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
400
circ.out
blur
10
0
550
bounce.out
translateY
150
0
750
elastic.out
scale
0.15..1.875
1
550
cubic.out
enter/slant-scatter
split: characterstagger: 20msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
400
power4.out
blur
3.8..47.5
0
550
bounce.out
rotate
-1665.671..1665.671
0
550
sine.out
skewX
-101.125..101.125
0
700
bounce.out
enter/slant-scatter-bounce
split: characterstagger: 15msperspective: 500origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
500
power3.out
translateX
190
0
900
sine.out
blur
8
0
750
back.out
skewX
-168.273..168.273
0
400
expo.out
scaleY
0..0
1
850
bounce.out
rotateX
-270
0
750
power4.out
scaleX
2
1
900
anticipate.out
enter/slant-scatter-spring
split: characterstagger: 15ms
Prop
From
To
Duration
Ease
opacity
0
1
550
cubic.out
translateY
-2008.854..2008.854
0
750
quart.out
rotate
-4435.622..4435.622
0
600
elastic.out
translateX
-1781.755..1781.755
0
600
elastic.out
blur
3.6..45
0
500
power4.out
enter/slant-scatter-spring-word
split: wordstagger: 15msorder: endperspective: 700
Prop
From
To
Duration
Ease
opacity
0
1
550
expo.out
scaleX
0.4..5
1
600
elastic.out
translateZ
-400
0
750
elastic.out
blur
3.2..40
0
750
expo.out
skewX
-167.292..167.292
0
500
elastic.out
enter/slant-scatter-word
split: wordstagger: 20ms
Prop
From
To
Duration
Ease
opacity
0
1
500
sine.out
scale
0.2
1
800
anticipate.out
translateX
180
0
700
anticipate.out
skewX
-175.197..175.197
0
550
power1.out
blur
8
0
650
power1.out
enter/slide-bounce
split: characterstagger: 40msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
450
sine.out
translateX
50
0
800
bounce.out
enter/slide-scatter
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
0
1
600
quart.out
translateX
30
0
800
sine.out
skewX
-16.561..16.561
0
550
power4.out
enter/soar-bounce
split: wordstagger: 45ms
Prop
From
To
Duration
Ease
opacity
0
1
300
back.out
translateY
-50
0
900
bounce.out
enter/soar-swarm
split: characterstagger: 55msorder: random
Prop
From
To
Duration
Ease
opacity
0
1
550
back.out
translateY
-60
0
650
power4.out
blur
10
0
450
quart.out
enter/spin-scatter
split: characterstagger: 40msperspective: 650origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
550
linear
scaleY
0.04..0.5
1
750
linear
rotateY
-1256.514..1256.514
0
850
linear
translateY
220
0
800
linear
enter/spread-x-scatter-curl
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
0
1
300
power4.out
scaleY
0..-2.5
1
550
cubic.out
scaleX
0.06..0.75
1
550
expo.out
skewX
-209.791..209.791
0
700
expo.out
blur
27
0
500
elastic.out
enter/stretch-x-bounce
split: characterstagger: 25ms
Prop
From
To
Duration
Ease
opacity
0
1
400
elastic.out
scaleX
0.6
1
700
bounce.out
blur
8
0
650
power4.out
translateX
-40
0
800
elastic.out
enter/stretch-x-kick
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
0
1
550
cubic.out
scaleX
0.4
1
800
back.out
translateY
-50
0
850
back.out
enter/stretch-x-scatter
split: characterstagger: 20msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
550
sine.out
scaleX
0.1..1.25
1
600
quart.out
translateY
-60
0
550
back.out
enter/stretch-y-scatter
split: characterstagger: 60msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
450
back.out
blur
3..37.5
0
750
sine.out
translateX
90
0
750
quart.out
scaleY
0.1
1
550
sine.out
skewX
-134.602..134.602
0
600
sine.out
enter/swipe-scatter
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
opacity
0
1
300
back.out
translateX
-131.56..131.56
0
600
sine.out
blur
1.6..20
0
600
cubic.out
enter/swipe-spring
split: characterstagger: 55msorder: center
Prop
From
To
Duration
Ease
opacity
0
1
400
bounce.out
translateX
60
0
800
elastic.out
enter/swirl-loose
split: wordstagger: 50ms
Prop
From
To
Duration
Ease
opacity
0
1
450
circ.out
rotate
270
0
550
circ.out
translateX
220
0
550
cubic.out
enter/swirl-scatter
split: characterstagger: 35msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
500
quart.out
scale
0.14..1.75
1
700
back.out
rotate
480
0
700
quart.out
scaleY
0.6..7.5
1
600
back.out
enter/swivel-scatter-deep
split: characterstagger: 55msperspective: 450origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
350
circ.out
translateZ
-600
0
700
expo.out
scale
0.65
1
800
back.out
rotateY
420
0
850
quart.out
scaleY
2
1
600
sine.out
rotate
-1729.634..1729.634
0
750
power4.out
enter/swivel-scatter-inward
split: characterstagger: 30msorder: edgesperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
450
back.out
translateY
110
0
750
elastic.out
rotateY
-450
0
750
sine.out
blur
3.8..47.5
0
750
cubic.out
translateZ
-400
0
550
sine.out
enter/swivel-scatter-loose
split: characterstagger: 30msorder: endperspective: 400origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
400
sine.out
rotate
510
0
600
quart.out
rotateY
-450
0
800
cubic.out
skewX
-112.441..112.441
0
600
elastic.out
enter/tilt-in-bounce
split: characterstagger: 60ms
Prop
From
To
Duration
Ease
opacity
0
1
550
sine.out
scaleY
0.7
1
600
bounce.out
rotate
-60
0
500
bounce.out
enter/tilt-in-inward
split: wordstagger: 55msorder: edges
Prop
From
To
Duration
Ease
opacity
0
1
450
elastic.out
blur
8
0
700
back.out
rotate
-30
0
500
quart.out
enter/tilt-in-scatter
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
opacity
0
1
500
power4.out
rotate
-1692.348..1692.348
0
800
quart.out
blur
1.8..22.5
0
700
power4.out
scale
0.11..1.375
1
750
expo.out
enter/tilt-in-scatter-curl
split: characterstagger: 60ms
Prop
From
To
Duration
Ease
opacity
0
1
350
bounce.out
blur
4..50
0
450
cubic.out
translateX
-1326.384..1326.384
0
800
back.out
scaleY
0.06..0.75
1
750
power4.out
scale
0.75
1
650
expo.out
scaleX
0.8..10
1
550
back.out
rotate
-6641.335..6641.335
0
550
bounce.out
enter/tilt-in-scatter-word
split: wordstagger: 40ms
Prop
From
To
Duration
Ease
opacity
0
1
400
back.out
rotate
-2676.345..2676.345
0
700
elastic.out
translateX
-180
0
600
sine.out
enter/tilt-in-spring
split: wordstagger: 30msorder: random
Prop
From
To
Duration
Ease
opacity
0
1
350
elastic.out
rotate
30
0
800
elastic.out
enter/tip-in-scatter
split: characterstagger: 45ms
Prop
From
To
Duration
Ease
opacity
0
1
600
power4.out
rotate
-6184.943..6184.943
0
700
quart.out
skewX
-252.602..252.602
0
550
quart.out
blur
2.8..35
0
600
back.out
enter/tip-in-scatter-curl
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
0
1
350
expo.out
blur
19
0
750
elastic.out
rotate
240
0
550
cubic.out
scaleY
0.2
1
550
expo.out
scale
0.5
1
900
back.out
skewX
-101.269..101.269
0
600
back.out
enter/tip-in-scatter-snap
split: characterstagger: 20msorder: edgesperspective: 650
Prop
From
To
Duration
Ease
opacity
0
1
450
expo.out
rotate
-689.006..689.006
0
550
expo.out
translateY
-713.35..713.35
0
750
elastic.out
translateZ
-300
0
550
quart.out
skewX
-135.569..135.569
0
650
bounce.out
enter/topple
split: characterstagger: 50msperspective: 1250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
500
quart.out
rotateX
60
0
700
cubic.out
enter/topple-scatter-kick
split: characterstagger: 35msorder: randomperspective: 400origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
600
quart.out
translateY
-90
0
650
back.out
rotateX
-1884.898..1884.898
0
800
back.out
scaleY
0.06..0.75
1
550
expo.out
rotate
-2011.127..2011.127
0
850
quart.out
scale
0.45
1
800
quart.out
enter/topple-scatter-trail
split: characterstagger: 20msorder: endperspective: 250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
400
circ.out
scale
0.55
1
650
cubic.out
rotate
-824.412..824.412
0
850
back.out
rotateX
180
0
650
quart.out
translateX
-170
0
550
expo.out
enter/topple-snap-loose-word
split: wordstagger: 45msorder: endperspective: 450origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
anticipate.out
scale
0.3
1
800
back.out
skewX
45
0
650
power3.out
rotateX
300
0
700
back.out
blur
15
0
700
sine.out
translateZ
-450
0
800
expo.out
enter/tumble-scatter
split: characterstagger: 50msorder: endperspective: 600origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
scaleY
0.2
1
650
linear
scale
0.5
1
850
linear
translateY
140
0
650
linear
rotateX
-1048.298..1048.298
0
850
linear
blur
15
0
650
linear
enter/tumble-scatter-2
split: characterstagger: 50msperspective: 400origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
blur
11
0
750
linear
scale
0.15..1.875
1
800
linear
translateZ
-400
0
650
linear
rotateX
-540
0
650
linear
enter/tumble-scatter-tunnel-word
split: wordstagger: 50msorder: endperspective: 250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
450
linear
rotateX
-450
0
650
linear
skewX
-130.479..130.479
0
650
linear
blur
17
0
450
linear
enter/tumble-x-loose
split: wordstagger: 40msperspective: 550origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
300
sine.out
blur
19
0
600
back.out
rotateX
360
0
750
power4.out
translateY
120
0
650
elastic.out
translateZ
-300
0
800
bounce.out
scaleX
0.1
1
550
elastic.out
enter/tumble-x-scatter-word
split: wordstagger: 20msorder: endperspective: 550origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
350
bounce.out
translateY
-445.54..445.54
0
800
power4.out
translateX
-170
0
600
elastic.out
rotateX
-90
0
750
circ.out
enter/tunnel
split: wordstagger: 25msperspective: 1150
Prop
From
To
Duration
Ease
opacity
0
1
550
expo.out
translateZ
-250
0
700
sine.out
translateY
40
0
550
expo.out
enter/turn-scatter-curl
split: characterstagger: 55msorder: endperspective: 400origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
300
elastic.out
skewX
-136.596..136.596
0
550
circ.out
rotateY
-270
0
500
circ.out
translateY
-617.184..617.184
0
500
quart.out
rotate
-120
0
800
power4.out
blur
1.2..15
0
450
quart.out
enter/turn-spring
split: wordstagger: 25msorder: endperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
550
expo.out
rotateY
-150
0
600
elastic.out
translateY
-190
0
650
bounce.out
enter/twirl-scatter
split: characterstagger: 45msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
550
power4.out
scaleX
0..-2.5
1
750
cubic.out
rotate
-660
0
700
back.out
scale
0.6
1
900
elastic.out
enter/twirl-scatter-2
split: characterstagger: 20msperspective: 600origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
0
1
500
linear
scale
0.4
1
650
linear
scaleY
0.04..0.5
1
900
linear
rotate
-720
0
750
linear
rotateX
-702.872..702.872
0
800
linear
enter/twirl-scatter-3
split: characterstagger: 60msperspective: 450origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
550
linear
rotateY
240
0
750
linear
rotate
480
0
600
linear
scale
0.45
1
800
linear
blur
3..37.5
0
700
linear
skewX
35
0
450
linear
enter/twirl-scatter-4
split: characterstagger: 55msorder: edges
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
rotate
690
0
700
linear
translateY
-394.808..394.808
0
550
linear
blur
1.4..17.5
0
400
linear
enter/twirl-scatter-curl
split: characterstagger: 20msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
450
quart.out
blur
3.2..40
0
650
sine.out
skewX
-389.111..389.111
0
400
power4.out
scaleX
0..0
1
750
elastic.out
scaleY
0.6..7.5
1
800
expo.out
rotate
690
0
600
elastic.out
enter/unfurl-x-kick
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
opacity
0
1
550
power4.out
translateX
60
0
700
circ.out
scaleX
1.4
1
500
back.out
enter/unfurl-x-scatter
split: characterstagger: 25ms
Prop
From
To
Duration
Ease
opacity
0
1
500
bounce.out
scale
0.35
1
800
elastic.out
translateX
200
0
800
expo.out
scaleX
0.6..7.5
1
650
expo.out
enter/unfurl-y-curl
split: characterstagger: 40msorder: end
Prop
From
To
Duration
Ease
opacity
0
1
350
back.out
scaleY
0.2
1
700
quart.out
scale
0.75
1
800
expo.out
blur
19
0
600
sine.out
enter/unfurl-y-scatter
split: characterstagger: 35msorder: random
Prop
From
To
Duration
Ease
opacity
0
1
300
expo.out
translateY
-90
0
750
elastic.out
scaleY
0.3..3.75
1
500
quart.out
enter/whirl-scatter
split: characterstagger: 45msperspective: 550
Prop
From
To
Duration
Ease
opacity
0
1
600
expo.out
translateX
-731.445..731.445
0
800
sine.out
blur
17
0
550
sine.out
translateZ
-200
0
750
circ.out
scaleX
4
1
850
back.out
rotate
-390
0
650
sine.out
enter/whirl-scatter-2
split: characterstagger: 15msperspective: 650
Prop
From
To
Duration
Ease
opacity
0
1
350
linear
translateZ
-400
0
850
linear
rotate
-2796.689..2796.689
0
800
linear
enter/whirl-scatter-3
split: characterstagger: 60msorder: centerperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
600
linear
rotateY
510
0
800
linear
blur
4..50
0
600
linear
rotate
-2112.647..2112.647
0
900
linear
enter/whirl-scatter-4
split: characterstagger: 35msperspective: 600origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
450
linear
rotateY
480
0
650
linear
rotate
-3302.464..3302.464
0
650
linear
blur
3.4..42.5
0
700
linear
enter/whirl-scatter-5
split: characterstagger: 35msorder: endperspective: 650origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
500
linear
rotateY
-1327.958..1327.958
0
550
linear
scaleY
0.6..7.5
1
850
linear
blur
2.2..27.5
0
700
linear
rotate
-1942.975..1942.975
0
550
linear
enter/whirl-scatter-6
split: characterstagger: 15msperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
0
1
450
anticipate.out
scale
0.65
1
650
sine.out
rotate
-1460.019..1460.019
0
800
power3.out
rotateY
-510
0
800
circ.out
scaleX
0.1
1
700
expo.out
enter/whirl-scatter-curl
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
0
1
550
expo.out
skewX
-79.759..79.759
0
550
circ.out
rotate
-600
0
800
circ.out
scale
0.06..0.75
1
550
cubic.out
translateY
-644.369..644.369
0
800
back.out
enter/whirl-scatter-loose
split: characterstagger: 55msorder: randomperspective: 500
Prop
From
To
Duration
Ease
opacity
0
1
300
cubic.out
blur
3.2..40
0
550
circ.out
translateZ
-600
0
550
sine.out
rotate
-690
0
650
quart.out
scaleX
0.3..3.75
1
550
expo.out
scaleY
0.2
1
600
quart.out
enter/whirl-scatter-snap
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
0
1
350
back.out
scaleY
0
1
550
power4.out
scaleX
0.02..0.25
1
700
power1.out
translateX
-1177.436..1177.436
0
500
power3.out
rotate
-3226.015..3226.015
0
700
power2.out
enter/whirl-scatter-snap-tunnel
split: characterstagger: 35msperspective: 150
Prop
From
To
Duration
Ease
opacity
0
1
500
power3.out
translateY
-1863.057..1863.057
0
600
back.out
scaleX
0.3
1
650
power2.out
translateZ
-600
0
650
sine.out
translateX
180
0
900
expo.out
rotate
-3721.458..3721.458
0
900
circ.out
enter/whirl-scatter-word
split: wordstagger: 40ms
Prop
From
To
Duration
Ease
opacity
0
1
350
power1.out
blur
2.2..27.5
0
500
power1.out
skewX
30
0
450
sine.out
rotate
-3431.959..3431.959
0
750
power2.out
scaleY
0.5..6.25
1
600
power1.out
exit/collapse-burst
split: wordstagger: 30msorder: random
Prop
From
To
Duration
Ease
opacity
1
0
350
sine.in
translateX
0
-470.244..470.244
600
expo.in
scale
1
0.06..0.75
500
circ.in
translateY
0
-130
600
back.in
exit/collapse-snap
split: wordstagger: 55ms
Prop
From
To
Duration
Ease
opacity
1
0
450
power2.in
translateX
0
-30
550
sine.in
translateY
0
-30
450
back.in
scale
1
0.65
500
expo.in
exit/compress-x-burst
split: characterstagger: 25msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
scaleX
1
0.4..5
600
circ.in
blur
0
16
500
circ.in
scaleY
1
0.8..10
450
back.in
translateY
0
-120
500
expo.in
exit/compress-x-burst-curl
split: characterstagger: 35msorder: centerperspective: 300
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
scaleX
1
0.3..3.75
500
power2.in
blur
0
19
450
sine.in
translateZ
0
-300
550
back.in
scaleY
1
0.6..7.5
450
expo.in
exit/compress-x-burst-kick
split: characterstagger: 50msperspective: 600
Prop
From
To
Duration
Ease
opacity
1
0
500
power2.in
translateZ
0
-400
400
power2.in
translateY
0
-110
650
sine.in
blur
0
20
350
back.in
scaleX
1
0.04..0.5
650
back.in
exit/compress-x-burst-loose
split: characterstagger: 35msperspective: 550
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
scaleY
1
0.4..5
550
sine.in
translateZ
0
-300
450
circ.in
scale
1
0.14..1.75
500
sine.in
scaleX
1
-1
500
circ.in
exit/compress-x-kick
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
300
expo.in
translateX
0
60
600
back.in
scaleY
1
0.5
450
circ.in
scaleX
1
1.2
400
back.in
exit/compress-y-burst-curl
split: characterstagger: 45msperspective: 500
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
skewX
0
-20
450
expo.in
translateX
0
-498.7..498.7
700
expo.in
scaleY
1
0..0
600
sine.in
translateZ
0
-450
450
power2.in
exit/dissolve-kick
split: characterstagger: 55msorder: edges
Prop
From
To
Duration
Ease
opacity
1
0
350
expo.in
blur
0
4
400
back.in
exit/exit-x-burst
split: characterstagger: 45msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
translateX
0
-106.907..106.907
600
power2.in
skewX
0
-10
450
sine.in
exit/fade-down
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
translateY
0
20
400
power2.in
exit/flatten-x-burst-deep
split: characterstagger: 50msorder: randomperspective: 500
Prop
From
To
Duration
Ease
opacity
1
0
450
power2.in
blur
0
3.8..47.5
600
expo.in
translateZ
0
-600
700
back.in
scaleX
1
0.2
650
sine.in
exit/flatten-x-burst-loose
split: characterstagger: 15ms
Prop
From
To
Duration
Ease
opacity
1
0
400
circ.in
skewX
0
-98.309..98.309
500
back.in
blur
0
2..25
500
power2.in
scaleX
1
0.1
600
power2.in
exit/flatten-x-curl
split: characterstagger: 55msorder: centerperspective: 300
Prop
From
To
Duration
Ease
opacity
1
0
450
back.in
skewX
0
40
550
circ.in
translateZ
0
-450
550
back.in
scaleX
1
2.5
600
back.in
translateX
0
140
600
back.in
exit/flatten-x-loose
split: characterstagger: 25ms
Prop
From
To
Duration
Ease
opacity
1
0
450
sine.in
scaleX
1
2
650
circ.in
translateY
0
120
500
circ.in
exit/flatten-y
split: wordstagger: 55ms
Prop
From
To
Duration
Ease
opacity
1
0
400
expo.in
scaleY
1
0.2
600
circ.in
translateY
0
140
600
back.in
exit/flatten-y-burst
split: characterstagger: 55msperspective: 200
Prop
From
To
Duration
Ease
opacity
1
0
450
expo.in
translateZ
0
-600
400
sine.in
scaleY
1
0.04..0.5
600
sine.in
skewX
0
-95.481..95.481
550
expo.in
translateX
0
-994.343..994.343
500
back.in
exit/flatten-y-curl
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
1
0
400
back.in
scaleY
1
-1
400
sine.in
translateX
0
-110
450
back.in
exit/flip-away
split: characterstagger: 35msperspective: 800origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
rotateY
0
90
550
back.in
exit/flip-out-burst
split: characterstagger: 20msorder: endperspective: 450origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
350
back.in
scaleY
1
0.5..6.25
500
circ.in
rotateX
0
-270
450
power2.in
rotate
0
-686.717..686.717
650
back.in
scaleX
1
1.5
700
circ.in
exit/flip-out-curl
split: characterstagger: 40msorder: endperspective: 300origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
500
power2.in
scaleY
1
2
600
expo.in
rotateX
0
150
600
circ.in
translateY
0
140
450
sine.in
exit/flip-out-loose
split: characterstagger: 55msorder: endperspective: 650origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
450
sine.in
translateX
0
210
700
power2.in
translateZ
0
-500
550
back.in
rotateX
0
450
500
sine.in
exit/fog-scatter
split: characterstagger: 45ms
Prop
From
To
Duration
Ease
opacity
1
0
400
linear
blur
0
17
350
linear
scaleX
1
0.3..3.75
400
linear
rotate
0
90
450
linear
translateX
0
-130
550
linear
exit/fog-scatter-2
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
translateY
0
150
550
linear
scaleY
1
2.5
550
linear
blur
0
2.6..32.5
450
linear
exit/fold-out-burst
split: characterstagger: 45msperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
500
expo.in
rotateX
0
-838.542..838.542
600
expo.in
rotateY
0
-1504.682..1504.682
650
circ.in
blur
0
1.8..22.5
450
back.in
skewX
0
-158.202..158.202
550
sine.in
exit/fold-out-burst-2
split: characterstagger: 55msperspective: 550origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
translateY
0
-150
550
back.in
translateX
0
-200
500
back.in
rotateX
0
-1910.147..1910.147
550
circ.in
exit/fold-out-burst-curl
split: characterstagger: 50msperspective: 300origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
500
power2.in
rotateX
0
-1671.432..1671.432
500
power2.in
scale
1
0.55
400
power2.in
translateX
0
-842.788..842.788
600
expo.in
scaleY
1
0.4..5
450
back.in
exit/fold-out-burst-loose
split: characterstagger: 25msorder: centerperspective: 250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
450
back.in
translateX
0
-190
450
circ.in
rotate
0
-420
650
back.in
scaleX
1
1.5
550
expo.in
scale
1
0.65
500
sine.in
rotateX
0
-1328.366..1328.366
450
sine.in
exit/implode-burst
split: wordstagger: 55msorder: endperspective: 250
Prop
From
To
Duration
Ease
opacity
1
0
350
sine.in
skewX
0
-30
450
expo.in
translateX
0
-100
400
expo.in
scale
1
0.1..1.25
500
back.in
translateZ
0
-450
500
back.in
exit/lean-out-burst
split: characterstagger: 55msperspective: 400
Prop
From
To
Duration
Ease
opacity
1
0
350
back.in
scale
1
0.07..0.875
550
circ.in
translateZ
0
-550
450
back.in
skewX
0
-426.352..426.352
350
circ.in
rotate
0
-4167.85..4167.85
600
sine.in
scaleY
1
0.6..7.5
650
back.in
scaleX
1
0.6..7.5
600
sine.in
blur
0
2.6..32.5
300
expo.in
exit/lean-out-burst-curl
split: characterstagger: 20msperspective: 150
Prop
From
To
Duration
Ease
opacity
1
0
300
expo.in
blur
0
5.6..70
350
power2.in
rotate
0
-9227.372..9227.372
550
power2.in
scale
1
0.09..1.125
600
sine.in
scaleY
1
0
450
circ.in
translateZ
0
-950
550
sine.in
exit/lean-out-burst-swarm
split: characterstagger: 20msorder: random
Prop
From
To
Duration
Ease
opacity
1
0
300
circ.in
rotate
0
-708.308..708.308
400
power2.in
blur
0
15
550
circ.in
exit/lean-out-burst-word
split: wordstagger: 35msorder: edgesperspective: 250
Prop
From
To
Duration
Ease
opacity
1
0
400
back.in
scale
1
0.4
650
sine.in
rotate
0
-3398.606..3398.606
650
expo.in
translateX
0
-3183.365..3183.365
500
expo.in
translateZ
0
-850
400
expo.in
translateY
0
-1398.153..1398.153
700
circ.in
exit/lean-out-snap
split: characterstagger: 60ms
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
rotate
0
60
450
expo.in
exit/lift-out-burst
split: characterstagger: 15ms
Prop
From
To
Duration
Ease
opacity
1
0
400
circ.in
blur
0
16
300
back.in
translateY
0
-348.088..348.088
600
sine.in
translateX
0
-417.724..417.724
400
sine.in
exit/mist-out
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
350
circ.in
blur
0
9
450
sine.in
exit/pinwheel-out
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
scaleX
1
0.3
700
circ.in
rotate
0
600
450
circ.in
blur
0
16
350
power2.in
exit/pivot-out-burst
split: characterstagger: 45msperspective: 450origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
300
back.in
translateX
0
-442.009..442.009
450
sine.in
rotateY
0
150
450
power2.in
blur
0
16
400
back.in
rotate
0
-1390.845..1390.845
450
circ.in
exit/pivot-out-burst-loose
split: characterstagger: 45msorder: centerperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
rotateY
0
-1634.263..1634.263
600
power2.in
translateZ
0
-400
500
sine.in
exit/pivot-scatter-tunnel
split: wordstagger: 45msperspective: 300
Prop
From
To
Duration
Ease
opacity
1
0
400
linear
rotate
0
270
500
linear
scaleX
1
0..-2.5
450
linear
translateZ
0
-300
650
linear
exit/rise-out-burst
split: characterstagger: 60msorder: edges
Prop
From
To
Duration
Ease
opacity
1
0
450
power2.in
translateY
0
-65.044..65.044
450
sine.in
exit/rise-out-kick
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
1
0
500
circ.in
translateY
0
-50
450
back.in
exit/rise-scatter
split: wordstagger: 15msorder: endperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
translateY
0
-160
650
linear
rotateY
0
-120
550
linear
scale
1
0.11..1.375
550
linear
exit/rise-scatter-2
split: characterstagger: 50msorder: endperspective: 650origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
translateY
0
-528.301..528.301
550
linear
blur
0
3.6..45
500
linear
scaleX
1
0.04..0.5
600
linear
scaleY
1
0
550
linear
rotateX
0
-450
550
linear
translateX
0
-210
600
linear
exit/scale-out
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
300
power2.in
scale
1
0.3
450
back.in
exit/shear-out-burst
split: characterstagger: 35msorder: center
Prop
From
To
Duration
Ease
opacity
1
0
300
power2.in
skewX
0
-20.602..20.602
450
expo.in
exit/slide-loose
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
opacity
1
0
400
linear
translateY
0
120
400
linear
translateX
0
-170
450
linear
scale
1
0.45
500
linear
scaleX
1
2
450
linear
exit/slide-scatter
split: characterstagger: 45msorder: random
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
rotate
0
480
600
linear
skewX
0
-256.058..256.058
350
linear
scaleX
1
0.6..7.5
700
linear
scaleY
1
0.06..0.75
650
linear
blur
0
4.4..55
500
linear
translateX
0
-1217.019..1217.019
600
linear
exit/slide-scatter-2
split: characterstagger: 45msperspective: 650
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
translateY
0
-654.094..654.094
650
linear
scale
1
0.13..1.625
400
linear
skewX
0
-20
500
linear
translateZ
0
-500
500
linear
translateX
0
-839.498..839.498
550
linear
exit/squash-x-burst
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
450
back.in
skewX
0
-180.065..180.065
300
circ.in
scale
1
0.1..1.25
600
expo.in
blur
0
18
400
circ.in
scaleX
1
0.02..0.25
450
back.in
exit/squash-x-burst-curl
split: characterstagger: 45msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
400
power2.in
skewX
0
-87.929..87.929
450
back.in
scaleY
1
2
500
power2.in
scaleX
1
0.04..0.5
500
power2.in
exit/swipe-out-snap
split: characterstagger: 45msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
400
sine.in
translateX
0
30
450
expo.in
exit/swirl-out-burst
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
opacity
1
0
450
sine.in
scaleY
1
0.4..5
500
back.in
blur
0
5.2..65
500
sine.in
skewX
0
-156.995..156.995
450
power2.in
translateY
0
-1468.315..1468.315
650
back.in
scale
1
0.8
450
expo.in
rotate
0
-360
600
expo.in
exit/swirl-out-curl
split: characterstagger: 60msorder: centerperspective: 200
Prop
From
To
Duration
Ease
opacity
1
0
450
circ.in
rotate
0
600
450
circ.in
scale
1
0.55
700
sine.in
translateZ
0
-300
400
power2.in
exit/swivel-out
split: wordstagger: 25msperspective: 1250origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
back.in
rotateY
0
-30
650
sine.in
translateY
0
-70
400
back.in
scaleX
1
0.7
550
circ.in
exit/swivel-out-burst
split: characterstagger: 45msorder: edgesperspective: 600origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
450
sine.in
blur
0
11
400
circ.in
translateX
0
-798.874..798.874
700
circ.in
rotate
0
360
600
circ.in
rotateY
0
-270
400
circ.in
exit/swivel-out-burst-curl
split: characterstagger: 60msperspective: 600origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
450
expo.in
rotate
0
-1383.56..1383.56
400
circ.in
translateZ
0
-500
500
back.in
scale
1
0.6
500
expo.in
rotateY
0
180
700
expo.in
exit/swivel-out-burst-loose
split: characterstagger: 35msorder: edgesperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
sine.in
scaleY
1
1.5
400
power2.in
translateZ
0
-400
500
expo.in
translateX
0
-499.568..499.568
600
circ.in
rotateY
0
360
650
power2.in
exit/swivel-out-burst-snap
split: characterstagger: 40msperspective: 200origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
scaleY
1
0.8..10
700
expo.in
translateZ
0
-450
600
sine.in
skewX
0
-303.217..303.217
500
power2.in
scale
1
0.15..1.875
500
power2.in
translateX
0
-290
500
sine.in
rotate
0
-4120.645..4120.645
650
back.in
rotateY
0
-4286.904..4286.904
650
expo.in
exit/swivel-out-curl
split: characterstagger: 45msperspective: 350origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
expo.in
rotateY
0
-420
500
expo.in
blur
0
13
550
circ.in
exit/swivel-out-kick
split: characterstagger: 40msorder: randomperspective: 1300origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
300
sine.in
scale
1
0.25
700
power2.in
rotateY
0
30
550
back.in
exit/swivel-out-loose
split: characterstagger: 35msorder: endperspective: 600origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
circ.in
scale
1
0.7
550
back.in
rotateY
0
210
450
circ.in
translateZ
0
-400
500
back.in
exit/tilt-out-burst
split: wordstagger: 45msperspective: 200
Prop
From
To
Duration
Ease
opacity
1
0
450
back.in
rotate
0
-1463.134..1463.134
600
circ.in
scaleX
1
2
450
back.in
skewX
0
-93.8..93.8
550
sine.in
scale
1
0.3
550
back.in
translateX
0
-130
500
back.in
translateZ
0
-550
400
back.in
exit/tilt-out-burst-deep
split: characterstagger: 45msperspective: 250
Prop
From
To
Duration
Ease
opacity
1
0
350
back.in
rotate
0
-1677.161..1677.161
550
power2.in
skewX
0
-285.686..285.686
350
power2.in
scaleY
1
0..-2.5
600
expo.in
translateZ
0
-850
600
back.in
blur
0
5.2..65
550
expo.in
exit/tilt-out-burst-kick
split: characterstagger: 60msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
300
expo.in
blur
0
2..25
550
expo.in
scale
1
0.5
600
circ.in
rotate
0
-1954.387..1954.387
600
back.in
scaleY
1
0.02..0.25
450
sine.in
exit/tilt-out-burst-loose
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
opacity
1
0
350
expo.in
scale
1
0.6
650
power2.in
scaleX
1
0..0
650
sine.in
rotate
0
-1702.922..1702.922
550
power2.in
exit/tilt-out-burst-word
split: wordstagger: 25msorder: center
Prop
From
To
Duration
Ease
opacity
1
0
450
circ.in
rotate
0
-180
500
sine.in
skewX
0
25
400
back.in
blur
0
1.4..17.5
500
sine.in
exit/tip-out-burst
split: characterstagger: 35ms
Prop
From
To
Duration
Ease
opacity
1
0
350
circ.in
scale
1
0.12..1.5
650
power2.in
rotate
0
-2817.788..2817.788
700
expo.in
scaleX
1
0.1
600
expo.in
skewX
0
-25
350
power2.in
blur
0
2.4..30
350
power2.in
scaleY
1
0.1
450
power2.in
exit/tip-out-burst-curl
split: characterstagger: 30msperspective: 250
Prop
From
To
Duration
Ease
opacity
1
0
300
back.in
rotate
0
-8211.136..8211.136
600
sine.in
translateZ
0
-500
600
expo.in
scaleX
1
0.6..7.5
500
back.in
exit/tip-out-burst-inward
split: characterstagger: 60msorder: edgesperspective: 550
Prop
From
To
Duration
Ease
opacity
1
0
350
back.in
translateY
0
90
400
back.in
blur
0
19
400
back.in
rotate
0
-1208.194..1208.194
650
sine.in
scale
1
0.15..1.875
600
power2.in
translateZ
0
-200
450
sine.in
exit/tip-out-burst-loose
split: characterstagger: 50msorder: end
Prop
From
To
Duration
Ease
opacity
1
0
500
power2.in
rotate
0
-1061.328..1061.328
700
circ.in
skewX
0
-30
500
sine.in
exit/topple
split: characterstagger: 40msorder: endperspective: 600origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
300
linear
scale
1
0.55
600
linear
rotateX
0
180
500
linear
exit/topple-out-burst
split: characterstagger: 40msorder: edgesperspective: 250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
350
back.in
rotateY
0
-730.346..730.346
500
circ.in
rotate
0
-682.323..682.323
650
power2.in
scale
1
0.6
500
back.in
rotateX
0
-379.093..379.093
600
expo.in
translateZ
0
-500
650
power2.in
exit/topple-out-burst-2
split: characterstagger: 55msperspective: 250origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
sine.in
scaleY
1
0.3..3.75
450
expo.in
rotateX
0
-1574.842..1574.842
450
sine.in
translateY
0
180
550
power2.in
translateZ
0
-400
450
power2.in
rotateY
0
-510
450
expo.in
exit/topple-out-burst-curl
split: characterstagger: 35msperspective: 400origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
350
expo.in
rotateX
0
180
650
circ.in
scaleX
1
0.06..0.75
400
sine.in
scale
1
0.11..1.375
500
expo.in
translateX
0
-716.595..716.595
550
sine.in
exit/topple-out-burst-kick
split: characterstagger: 30msorder: endperspective: 350origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
250
circ.in
skewX
0
-103.077..103.077
600
back.in
scale
1
0.1..1.25
650
sine.in
rotateX
0
-540
450
back.in
rotate
0
-120
600
circ.in
rotateY
0
-513.409..513.409
500
back.in
translateZ
0
-250
500
back.in
exit/topple-out-burst-snap
split: characterstagger: 50msorder: endperspective: 250origin: [0.5, 1]
Prop
From
To
Duration
Ease
opacity
1
0
450
circ.in
blur
0
5.6..70
550
back.in
translateZ
0
-700
450
power2.in
rotate
0
-2756.425..2756.425
700
back.in
translateY
0
-2088.237..2088.237
650
power2.in
rotateX
0
-2681.519..2681.519
450
expo.in
exit/turn-out-burst
split: characterstagger: 30msorder: centerperspective: 500origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
sine.in
translateY
0
-735.221..735.221
650
expo.in
translateZ
0
-500
700
sine.in
rotateY
0
330
550
back.in
blur
0
2.6..32.5
550
back.in
exit/turn-out-burst-2
split: characterstagger: 35msperspective: 300origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
circ.in
rotate
0
270
650
expo.in
rotateY
0
-510
600
expo.in
scaleX
1
0.1
500
power2.in
translateZ
0
-350
600
expo.in
scaleY
1
0.3..3.75
400
back.in
exit/turn-out-burst-deep
split: characterstagger: 35msperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
power2.in
rotate
0
420
400
back.in
scaleX
1
0.3..3.75
600
power2.in
translateZ
0
-300
550
power2.in
rotateY
0
-1514.115..1514.115
650
sine.in
skewX
0
30
400
circ.in
exit/turn-out-burst-snap
split: characterstagger: 60msorder: endperspective: 300origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
450
circ.in
translateZ
0
-550
550
power2.in
rotateY
0
180
500
expo.in
scaleY
1
0..-2.5
650
circ.in
rotate
0
330
500
sine.in
exit/turn-out-burst-swarm
split: characterstagger: 40msorder: randomperspective: 200origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
350
expo.in
scale
1
0.04..0.5
600
expo.in
rotateY
0
420
600
sine.in
translateZ
0
-400
550
circ.in
translateY
0
-531.079..531.079
550
expo.in
exit/turn-out-burst-trail
split: characterstagger: 60msorder: endperspective: 350origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
expo.in
rotateY
0
-1766.601..1766.601
600
sine.in
scale
1
0.65
650
sine.in
scaleY
1
0.5..6.25
650
expo.in
translateZ
0
-500
500
expo.in
translateY
0
210
500
power2.in
translateX
0
-220
600
power2.in
exit/twirl
split: characterstagger: 45ms
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
rotate
0
720
450
linear
scale
1
0.65
600
linear
exit/twirl-2
split: characterstagger: 40ms
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
scaleY
1
0
450
linear
scaleX
1
0
550
linear
rotate
0
-690
650
linear
exit/twirl-loose
split: characterstagger: 45msperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
linear
rotate
0
480
450
linear
scale
1
0.75
450
linear
rotateY
0
-120
600
linear
exit/twirl-out-burst
split: characterstagger: 20msorder: center
Prop
From
To
Duration
Ease
opacity
1
0
400
circ.in
skewX
0
-73.053..73.053
350
sine.in
scaleY
1
0.2
500
circ.in
rotate
0
-540
700
sine.in
exit/twirl-out-burst-loose
split: characterstagger: 55msorder: endperspective: 450
Prop
From
To
Duration
Ease
opacity
1
0
450
expo.in
scaleY
1
0.5..6.25
600
back.in
rotate
0
420
450
circ.in
translateZ
0
-600
650
sine.in
skewX
0
40
450
back.in
translateX
0
110
500
expo.in
exit/twirl-scatter-tunnel
split: characterstagger: 45msperspective: 250
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
rotate
0
690
600
linear
translateZ
0
-550
450
linear
scale
1
0.07..0.875
650
linear
exit/whirl-scatter
split: characterstagger: 45msorder: edges
Prop
From
To
Duration
Ease
opacity
1
0
500
linear
scaleX
1
0.6..7.5
550
linear
rotate
0
-1871.995..1871.995
550
linear
translateY
0
180
450
linear
blur
0
11
550
linear
exit/whirl-scatter-tunnel
split: characterstagger: 50msperspective: 300origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
opacity
1
0
400
linear
rotateY
0
-1938.928..1938.928
700
linear
translateZ
0
-800
450
linear
rotate
0
-3440.352..3440.352
600
linear
blur
0
2.6..32.5
550
linear
skewX
0
-372.022..372.022
300
linear
exit/whirl-scatter-tunnel-2
split: characterstagger: 35msorder: edgesperspective: 100
Prop
From
To
Duration
Ease
opacity
1
0
450
linear
translateZ
0
-700
600
linear
rotate
0
-7084.676..7084.676
600
linear
scale
1
0.08..1
550
linear
skewX
0
-246.666..246.666
350
linear
emphasis/bob
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
translateY
0
-8
175
cubic.out
translateY
-8
0
350
cubic.out
emphasis/carousel-inward
split: characterstagger: 20msorder: edges
Prop
From
To
Duration
Ease
rotate
0
360
650
cubic.out
emphasis/coin-flip
split: characterstagger: 30msperspective: 800origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateY
0
360
700
power2.inOut
emphasis/fold-tap-curl
split: wordstagger: 60msperspective: 700origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateX
0
25
175
cubic.out
rotateX
25
0
225
cubic.out
emphasis/jolt-y-trail
split: characterstagger: 15msorder: end
Prop
From
To
Duration
Ease
translateY
0
14
200
sine.inOut
translateY
14
0
325
sine.inOut
emphasis/jolt-y-trail-2
split: characterstagger: 55msorder: end
Prop
From
To
Duration
Ease
translateY
0
-8
200
sine.inOut
translateY
-8
0
225
sine.inOut
emphasis/lean-loose
split: characterstagger: 55ms
Prop
From
To
Duration
Ease
rotate
0
15
175
cubic.out
rotate
15
0
225
cubic.out
emphasis/pinwheel-curl
split: wordstagger: 30msorder: end
Prop
From
To
Duration
Ease
rotate
0
360
800
sine.inOut
emphasis/pivot
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
rotate
0
360
700
expo.out
emphasis/pivot-2
split: wordstagger: 40ms
Prop
From
To
Duration
Ease
rotate
0
360
700
anticipate.inOut
emphasis/pivot-3
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
rotate
0
360
600
power2.inOut
emphasis/pivot-bounce
split: characterstagger: 50msorder: edges
Prop
From
To
Duration
Ease
rotate
0
360
650
bounce.out
emphasis/pivot-snap
split: characterstagger: 30ms
Prop
From
To
Duration
Ease
rotate
0
360
650
back.inOut
emphasis/pulse
split: characterstagger: 20msrepeat: 3repeatDelay: 400
Prop
From
To
Duration
Ease
scale
1
1.25
200
sine.out
scale
1.25
1
250
sine.in
emphasis/pump-trail
split: characterstagger: 25msorder: end
Prop
From
To
Duration
Ease
scale
1
0.82
200
sine.inOut
scale
0.82
1
225
sine.inOut
emphasis/rock-inward
split: wordstagger: 25msorder: edges
Prop
From
To
Duration
Ease
rotate
0
-15
175
cubic.out
rotate
-15
0
250
cubic.out
emphasis/shake
split: characterstagger: 15msrepeat: 2repeatDelay: 300
Prop
From
To
Duration
Ease
translateX
0
-6
80
sine.inOut
translateX
-6
6
120
sine.inOut
translateX
6
0
100
sine.inOut
emphasis/spin
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
rotate
0
360
600
power2.inOut
emphasis/sway-curl
split: characterstagger: 50ms
Prop
From
To
Duration
Ease
rotate
0
26.25
175
cubic.out
rotate
26.25
0
325
cubic.out
emphasis/swivel-curl
split: characterstagger: 50msorder: endperspective: 550origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateY
0
360
600
sine.inOut
emphasis/swivel-snap-depth
split: characterstagger: 20msorder: endperspective: 1050origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateY
0
360
600
back.out
emphasis/tap-x-loose
split: characterstagger: 30msorder: center
Prop
From
To
Duration
Ease
translateX
0
8
275
sine.inOut
translateX
8
0
225
sine.inOut
emphasis/tip-curl
split: characterstagger: 35msorder: endperspective: 700origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateX
0
25
200
sine.inOut
rotateX
25
0
350
sine.inOut
emphasis/tip-deep
split: characterstagger: 40msorder: edgesperspective: 650origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateX
0
-25
200
sine.inOut
rotateX
-25
0
225
sine.inOut
emphasis/turn-deep
split: characterstagger: 15msperspective: 650origin: [0.5, 0.5]
Prop
From
To
Duration
Ease
rotateY
0
360
650
sine.inOut
emphasis/twirl-curl
split: characterstagger: 50msorder: random
Prop
From
To
Duration
Ease
rotate
0
360
550
sine.inOut
emphasis/twirl-curl-inward
split: characterstagger: 30msorder: edges
Prop
From
To
Duration
Ease
rotate
0
360
750
cubic.out
emphasis/whirl-loose
split: characterstagger: 20ms
Prop
From
To
Duration
Ease
rotate
0
360
800
sine.inOut
emphasis/whirl-loose-2
split: characterstagger: 45ms
Prop
From
To
Duration
Ease
rotate
0
360
800
cubic.out
emphasis/wiggle-outward
split: characterstagger: 30msorder: center
Prop
From
To
Duration
Ease
translateX
0
-2.5
175
cubic.out
translateX
-2.5
0
225
cubic.out
emphasis/wobble
split: characterstagger: 25msrepeat: 2repeatDelay: 400
Prop
From
To
Duration
Ease
rotate
0
-10
150
sine.inOut
rotate
-10
10
200
sine.inOut
rotate
10
0
150
sine.inOut

Recipes

Common patterns. Each one stands alone — copy, adapt, ship.

Reveal on scroll-into-view

Standard observer pattern. autoPlay: false + handle.play() when the element first crosses the threshold; disconnect after to keep things cheap. 

import { animateText } from "@vysmo/text";

// Reveal-on-scroll without rolling your own timeline: autoPlay false,
// kick off when the element enters the viewport.
const handle = animateText(element, {
  preset: "enter/fade-up",
  autoPlay: false,
});

const io = new IntersectionObserver(([entry]) => {
  if (entry?.isIntersecting) {
    handle.play();
    io.disconnect();
  }
}, { threshold: 0.3 });
io.observe(element);

Scroll-driven scrub

Pair handle.seek(p) with @vysmo/scroll for word-by-word reveals tied directly to scroll position. The choreography becomes a timeline you control with the wheel. 

import { animateText } from "@vysmo/text";
import { createScrollProgress } from "@vysmo/scroll";

// Scroll progress drives the choreography directly via handle.seek(p).
// 0 = un-animated; 1 = end-state. Pair any scroll source — wheel,
// touch-drag, or createScrollProgress — with seek to scrub.
const handle = animateText(element, {
  preset: "enter/elastic-rise",
  autoPlay: false,
});

createScrollProgress({
  element: section,
  onProgress: (p) => handle.seek(p),
});

Hover / click emphasis

The emphasis/* presets restart cleanly — handle.stop() resets every slice to its un-animated state, then play() starts a fresh cycle. 

import { animateText } from "@vysmo/text";

// Emphasis presets are designed to autoloop or replay — pair shake /
// pulse / wobble / spin with a hover or click handler.
const handle = animateText(element, {
  preset: "emphasis/shake",
  autoPlay: false,
});

element.addEventListener("pointerenter", () => {
  handle.stop();   // restart from the top if mid-play
  handle.play();
});

Roll your own choreography

Skip the preset; declare animations directly. Per-spec stagger / staggerOrder let each property run on its own cadence, which is most of what makes bespoke kinetic typography feel intentional rather than generic. 

import { animateText } from "@vysmo/text";
import { power2Out, backOut } from "@vysmo/easings";

// Skip presets entirely. Roll your own multi-prop choreography
// — one timeline per slice, all slices sharing a master clock.
animateText(element, {
  split: "character",
  stagger: 30,
  staggerOrder: "edges",  // start at both ends, meet in the middle
  animations: [
    { prop: "opacity",    from: 0,  to: 1, duration: 400, ease: power2Out },
    { prop: "translateY", from: 20, to: 0, duration: 500, ease: backOut },
    { prop: "blur",       from: 8,  to: 0, duration: 400, stagger: 15 },
  ],
});

3D transforms with perspective

rotateX / rotateY / translateZ only look 3D when the container has a CSS perspective. Presets that use 3D carry their own perspective default; override per call when you want a different depth feel. 

import { animateText, flipX } from "@vysmo/text";

// 3D transforms (rotateX, rotateY, translateZ) need a container
// perspective to look 3D — without it, rotateY(90deg) is just a 1px
// line. Presets that use 3D (flip-x / flip-away / coin-flip / spin /
// depth-zoom) carry their own perspective default; you can override.
animateText(element, {
  preset: flipX,
  perspective: 800,            // px; preset default 600
  perspectiveOrigin: "50% 30%",
  transformOrigin: "bottom",
});

FAQ & gotchas

The handful of things that catch people the first time they ship a text animation.

My Arabic / Devanagari text breaks when split by character.

Connected scripts shape letters based on their neighbours, and splitting by character drops every grapheme into its own inline-block box — the browser can't join letters that no longer touch. Use split: "word" or "line" instead, with a locale hint for the Intl.Segmenter: 

// Connected scripts (Arabic, Devanagari, Lao, Khmer, …) shape letters
// based on neighbours. Splitting by character drops every grapheme
// into its own inline-block box and breaks shaping — letters won't
// join. Use word or line mode for those:
animateText(element, {
  preset: "enter/fade-up",
  split: "word",
  locale: "ar",   // hint for Intl.Segmenter (any BCP-47)
});

// LTR / RTL handling: word and line splits work in both directions
// — the browser's bidi algorithm orders the inline-block siblings
// visually.

How does it handle reduced motion?

By default: snaps to end state, resolves finished immediately, no animation. Opt out per call when motion is the entire point of the page (a kinetic- typography hero, a brand reveal, the playground itself). 

// Default behaviour: when prefers-reduced-motion is set, the slices
// snap to their end state and the animation is skipped. The handle
// still resolves `finished` so dependent code keeps flowing.
//
// Opt out (e.g., for the playground or a hero where motion is the
// whole point of the page):
animateText(element, {
  preset: "enter/elastic-rise",
  respectReducedMotion: false,
});

Can I mix presets?

Yes — chain calls. Run an enter preset, await its finished, then run an emphasis preset. The second call re-splits and re-attaches; the first call's handle's splits.restore() ran during teardown if you held onto it. Most code paths just sequence await handle.finished followed by another animateText(element, ...).

Why are slices aria-hidden?

Splitting wraps every slice in its own inline-block span. Screen readers would otherwise announce each slice independently — "H, e, l, l, o" or worse. splitText appends a visually-hidden screen-reader copy of the original text and marks every visible slice aria-hidden, so assistive tech reads the line, not the choreography.

How do I clean up?

handle.stop() stops the timeline and clears inline styles. handle.splits.restore() puts the element back to its original text. Both are idempotent; calling them on unmount in component frameworks is the right shape, even if the element is about to be removed from the DOM.

Bundle size — what do I actually ship?

The runtime is small. Presets are plain data; importing one by reference (import { fadeUp }) ships only that preset, not the whole catalog. A single preset is a few hundred bytes; the 14 hand-curated starters together are about 3 KB gzipped. Tree-shaking is what keeps the full catalog sustainable.