Exports that stay interactive
React, SwiftUI, HTML and CSS exports become real interactive components with your states, colors, triggers and transitions.
When a scene has states and triggers, the code exports carry them along. You don't rebuild the prototype in code: the export has the states with their colors and text, the transitions (per trigger where you set one), the gestures and the automatic steps.
| Export | What you get |
|---|---|
| Motion (React) | A component with variants per layer, gesture handlers and useState (whileHover / whileTap for simple cases); colors and text looked up by state; per-trigger transitions as dynamic variants; automatic steps and load triggers run inside it. With Pause, Reverse or Scroll progress, the timeline runs on a clock the component controls |
| SwiftUI | A state enum with each state's animation, .onHover and gestures (DragGesture for drags), withAnimation, .task(id:) for automatic steps, and colors and text per state |
| HTML | An interactive page with a small state machine (data-state on the stage), color rules and text swaps per state, drag listeners, and control of its CSS animations for pause, reverse and scroll scrubbing |
| CSS | :hover and :active rules for simple states, plus data-state rules with colors and per-trigger timing |
| Lottie | The timeline only: Lottie has no states |
| Web Animations, video, GIF | The timeline only |
- Press ⌘E to open Render.
- Under Other formats, pick Motion (React) (“.tsx · interactive component”), SwiftUI (“.swift · interactive view”) or HTML (“Interactive page”). CSS is in the inspector's Code tab.
What each export supports
| Feature | React | SwiftUI | HTML | CSS |
|---|---|---|---|---|
| Numbers per state | Yes | Yes, except width, height and radius | Yes | Yes, except width, height and radius |
| Colors and text per state | Yes | Yes | Yes | Colors |
| Per-trigger transitions | Yes | Yes | Yes | Yes |
| Pause / Reverse | Yes | No (the timeline plays through) | Yes | No |
| Drag | Yes | Yes | Yes | No |
| Scroll progress | Yes | No (plays through) | Yes | No |
| Set variant | Tweens, in scenes without states | Tweens (withAnimation), in scenes without states | Tweens (CSS transitions) | No |
Current limits
- Width, height and corner radius states aren't in SwiftUI and CSS yet.
- Pause, Reverse and Scroll progress play through in SwiftUI; the code says so in a comment.
- Gradient colors per state aren't supported.
- Shared-element morphs aren't in the React export yet.
- A scene with states exports components flattened, not as separate component functions; Set variant then plays in EaseKit and HTML only.
See Code exports and the Export format matrix for details on each format.