Interactions and states
Documentation

Interactions and states

Turn an animation into an interactive component: states with colors and text, tap, hover, drag and scroll triggers, a live preview, and exports that stay interactive.

  1. StatesNamed looks like Hover, Pressed or On, each with its own values, colors and text at rest, and a transition into it.
  2. TriggersEvents like tap, hover, drag and scroll that play, pause, reverse, switch states or set variants.
  3. Drag and scroll triggersLet a layer follow the pointer and switch states when it's dragged far enough, or let scrolling scrub the timeline.
  4. Interactive previewHover, press, tap, drag and scroll right on the stage to try your states.
  5. Record a stateEdit layers on the stage while a state records, and EaseKit stores the changes, colors and text as that state's values.
  6. Exports that stay interactiveReact, SwiftUI, HTML and CSS exports become real interactive components with your states, colors, triggers and transitions.