Animation Presets

Utility library with Material Design 3 motion presets for fade, slide, scale, emphasis, sequence, and class-based animations. Not intended to communicate required state changes on its own; pair motion with persistent visual cues and text.

Basic Usage

Run a preset animation on a single element with animate. This keeps motion consistent with shared MD3 timing and easing tokens.

A
Fade In Slide Up Scale In 
await animate(element, "fadeIn");
await animate(element, "slideInUp");
await animate(element, "scaleIn");

Initial Value

Use explicit options for duration, easing, and delay.

B
Run Configured Animation

Variants

Pick from entrance, exit, and emphasis presets.

Entrance Presets

Fade
Down
Start
End

Emphasis Presets

Bounce
Flip
Shake
Glow

States

Class-based presets are useful for looping and manual stop/resume states.

C
Start Pulse Pause Resume Stop

Interactive Example

Animate a sequence and log each step.

1
2
3
Run Sequence Clear Log
Event log:

API

Attributes

Attribute Type Default Description
None - - Utility functions are configured via JavaScript arguments.

Events

Event Detail Description
animationend native Used internally by animate promise resolution.

Functions

Function Description
initAnimationPresets() Injects keyframes and utility classes once.
animate(element, preset, options) Runs a single preset and resolves when complete.
animateWithClass(element, presetName, options) Applies class-based animation with remove/pause/resume controls.
animateSequence(elements, preset, options) Runs staggered animation across multiple elements.
animateSequenceOnElement(element, sequence) Runs multiple presets in order for one element.
getPresets(), getPreset(name) Reads available presets.
getDuration(key), getEasing(key) Reads token values.
createPreset(config) Creates a custom preset object.

CSS Parts

Part Description
None Utility does not expose shadow parts.

CSS Custom Properties

Property Description
--md-sys-motion-duration-* Generated duration tokens.
--md-sys-motion-easing-* Generated easing tokens.

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab Preset demo controls Moves focus between animation control buttons
Enter / Space Focus on control button Runs selected animation preset

Semantics

  • Animations are asynchronous and do not block interaction.
  • Duration can be reduced for motion sensitivity.
  • Use non-essential motion for emphasis only.

Usage Guidelines

  • When to use: Use entrance and exit presets to reinforce content transitions and hierarchy in response to user actions.
  • When not to use: Avoid decorative motion in dense workflows or where it delays critical interactions.
  • Composition: Prefer shared MD3 duration/easing tokens and staggered sequences for grouped content reveals.
  • Common mistakes: Overusing infinite animations reduces clarity and can increase motion fatigue.