Code exports
Motion (React), SwiftUI, CSS and Web Animations code, ready to paste into your app.
EaseKit writes production code for your animation. Open the Code tab in the inspector to see it syntax-colored, or export files from Render. React, SwiftUI, CSS and Web Animations check the viewer's reduced-motion setting.
| Format | What you get |
|---|---|
| Motion (React) | A .tsx component for motion.dev: every track as keyframes with per-segment easing, springs as an exact port of EaseKit's curve, draw-on via pathLength, reduced motion. Components become typed function components. The spec is embedded as a comment, so it re-imports without loss |
| SwiftUI | A .swift file using keyframeAnimator (macOS 14 / iOS 17), with vectors as Shapes. Components become Views |
| CSS | @keyframes and a class per layer, with per-segment timing functions (springs as linear() approximations) and a prefers-reduced-motion rule. Motion only: you style the elements |
| JavaScript (Web Animations) | A dependency-free .js module: mount…(element) builds the scene and returns play, pause, seek and replay. Sampled at 60 fps |
| Lottie | See Lottie |
| SVG (Figma) | The frame at the playhead, for Figma |
| JSON | EaseKit's own format, to re-import later |
Copy or save
- In the Code tab, pick a format from the menu and click Copy or Save…. Set which format opens first in Settings → Export → Code → Default in Code tab.
- The JSON view is editable: change the text and click Apply to make it a version, or Reset.
- The stage's Export menu has Copy Motion (React), Copy JavaScript (Web Animations), Copy SwiftUI Code, Copy CSS and Copy JSON, plus Save JS Module (.js)…, Save Motion Component (.tsx)…, Save SwiftUI File… and Save CSS File….
- Render → Other formats saves Motion (React), SwiftUI, Web Animations and EaseKit JSON files.
Using the React export
Motion components need the motion package:
npm i motionWith components in the scene (and no states), you get a function component per component, with props and variant sets:
<Row title="New message" delay={0.06} />Variant switches animate: the component keeps one element tree for every look and Motion animates to the new one, so changing state="read" tweens instead of re-mounting. Pass-through props become props of the outer component that forward to the nested one.
SwiftUI
The SwiftUI file compiles for macOS 14 and iOS 17. Inner shadows, background, motion and zoom blur stay in EaseKit's renderer, shape keys use the first key's shape, and the camera isn't exported.
CSS and Web Animations
CSS carries the motion only: a @keyframes rule and a class per layer (transforms, opacity, keyframed blur), trims for <path pathLength="1"> elements, shape morphs (Chrome and Firefox; Safari keeps the first shape), fonts and state rules. You apply the classes to your own elements and style them yourself. Web Animations builds the whole scene itself (inline SVG and styled boxes) and animates it, so it looks like the preview; video becomes a muted <video> kept on the scene clock.
Auto Layout and corners in code
Groups with Auto Layout become flexbox containers in React, HTML and CSS, so the browser reflows the siblings when a child's width animates or its text changes; SwiftUI gets HStack / VStack. Web Animations, Lottie and SVG draw the solved positions as keyframes. Rectangles with independent corners get a four-value border-radius on the web and UnevenRoundedRectangle in SwiftUI.
Works with
- Export format matrix: which features each exporter supports.
- Fonts: how fonts travel with code.