Animation presets reference

Animation presets are pre-built keyframe templates accessed from the timeline’s Apply animation preset button. They overlay modifications on top of the layer’s current state, then return to the baseline (entrance) or move away from it (exit). For prose context see Editor → Timeline.

Conventions

• Default duration is in milliseconds.
• Easing values: linear, ease-in, ease-out, ease-in-out.
• Presets target fxOpacity (per-element opacity, applied to the inner content) rather than the master opacity (layer-level wrap). This way the layer’s background / stroke / shadow stay visible during a fade, and the user’s manual opacity slider stacks independently.
• Distance constants used by slide presets: SLIDE_DISTANCE = 200 px, DIAGONAL_DX = 400 px, DIAGONAL_DY = 300 px.

Entrance

fadeIn

Label	Fade in
Duration	600 ms
Easing	ease-out
Modifies	fxOpacity (0 → 1)

Two keyframes: baseline with fxOpacity = 0 at startTime, baseline at startTime + duration.

slideInLeft / slideInRight / slideInTop / slideInBottom

Label	Slide in (left / right / top / bottom)
Duration	600 ms
Easing	ease-out
Modifies	offsetX or offsetY (offset by ±200 px), fxOpacity (0 → 1)

Two keyframes: offset by 200 px in the direction of entry + fxOpacity = 0 at startTime, baseline at startTime + duration.

slideInDiagonalTopLeft

Label	Slide in (top-left, 45°)
Duration	800 ms
Easing	ease-out
Modifies	offsetX (−400), offsetY (−300), rotation (−45° → 0), fxOpacity (0 → 1)

Two keyframes: offset diagonally upper-left + rotated −45° + transparent at start, baseline at end.

flip3DLeft / flip3DRight

Label	Flip 3D (left / right)
Duration	800 ms
Easing	ease-out → linear → (default)
Modifies	rotationY (±180 → ±90 → 0), fxOpacity (0 → 0.5 → 1)

Three keyframes (start, midpoint, end). 3D flip on the Y axis with cross-fade.

scrambleIn

Label	Scramble in
Duration	1500 ms
Easing	linear → (default)
Modifies	scrambleProgress (0 → 1)
Required params	order: 'left-to-right' (or other resolve order)

Text-specific. The engine reads layer.data.scramble and mutates innerText per frame. Picking this preset opens a config modal where you set the duration + resolve order.

Emphasis

pulse

Label	Pulse
Duration	800 ms
Easing	ease-in-out
Modifies	fxOpacity dipped to 50% of baseline at midpoint

Three keyframes: baseline → 50% opacity at half → baseline.

shake

Label	Shake
Duration	500 ms
Easing	(default)
Modifies	offsetX oscillates ±10, ±6, back to baseline

Six keyframes spaced at duration / 5 intervals — base, −10, +10, −6, +6, base.

rotateY360

Label	Rotate Y 360°
Duration	1500 ms
Easing	linear
Modifies	rotationY (0 → 360°)

Two keyframes: 0° at start, 360° at end. Continuous rotation around the Y axis.

Exit

fadeOut

Label	Fade out
Duration	500 ms
Easing	ease-in
Modifies	fxOpacity (1 → 0)

Two keyframes: baseline at start, fxOpacity = 0 at end.

slideOutDiagonalBottomRight

Label	Slide out (bottom-right, 45°)
Duration	800 ms
Easing	ease-in
Modifies	offsetX (+400), offsetY (+300), rotation (0 → 45°), fxOpacity (1 → 0)

Two keyframes: baseline at start, diagonally offset bottom-right + rotated +45° + transparent at end.

scrambleOut

Label	Scramble out
Duration	1500 ms
Easing	ease-in → (default)
Modifies	scrambleProgress (1 → 0), fxOpacity (1 → 0)
Required params	order: 'left-to-right' (or other resolve order)

Text-specific. Mirrors scrambleIn: baseline at start, scrambleProgress = 0 + fxOpacity = 0 at end.

Categories at a glance

Category	Presets
entrance	fadeIn, slideInLeft, slideInRight, slideInTop, slideInBottom, slideInDiagonalTopLeft, flip3DLeft, flip3DRight, scrambleIn
emphasis	pulse, shake, rotateY360
exit	fadeOut, slideOutDiagonalBottomRight, scrambleOut

Fifteen presets total.

How to apply a preset

1. Select the layer in the timeline.
2. Move the playhead to where you want the preset to start.
3. Click Apply animation preset in the timeline toolbar.
4. Pick a category, then a preset.
5. (Scramble only) — the scramble config modal opens; pick order + duration.
6. The keyframes are generated. Click Save to persist.

Where to go next

• Editor → Timeline — UI-side prose.
• Editor → Layer Style → Transform — for non-animated 3D transforms.
• Reference → Layer types — the animation JSON shape on each layer.