Docs Reference Export format matrix Export format matrix Which features each export supports: interactions, components, trim, taper, video, fonts, masks, blur, gradients and more.
EaseKit's preview can draw more than any single file format can carry. This matrix shows what each export keeps. Yes means it comes across as designed; other entries say how it's approximated. Video renders (MP4, GIF, PNG) are made by EaseKit's own renderer, so they show everything.
Motion and structure# Feature Video / GIF / PNG Lottie HTML Motion (React) SwiftUI CSS Web Animations SVG (Figma) States and triggers No (timeline) No (timeline) Yes Yes Yes Yes (:hover, :active, data-state) No No (still) Colors and text per state No (timeline) No Yes Yes Yes Colors No No Per-trigger transitions No No Yes Yes Yes Yes No No Pause and reverse triggers No No Yes Yes Plays through No No No Drag triggers No No Yes Yes (drag) Yes (DragGesture) No No No Scroll progress No No Yes (scrubs) Yes (useScroll) Plays through No No No Components Yes Precomps Flattened Function components (no states) Views (no states) Flattened Flattened Flattened Props and variants Yes A precomp per combination Baked Typed props, string unions Parameters, enums Baked Baked Baked Animated variant switches Yes Timeline switches as keyframes Yes (CSS transitions) Yes (Motion animate) Yes (withAnimation) Timeline switches as keyframes Timeline switches as keyframes At that moment Pass-through props Yes Baked Baked Forwarded props Forwarded parameters Baked Baked Baked Springs Yes Baked keyframes Sampled Exact Yes linear()Sampled No (still) Actions Yes Baked Baked Baked Baked Baked Baked At that moment Shape keys Yes Yes Yes Yes First shape Chrome, Firefox Yes At that moment Text animations Yes No No No No No No At that moment Camera Yes Zoom, pan, roll Yes Yes No No Yes Flattened Auto Layout Yes Baked keyframes Flexbox Flexbox HStack / VStackFlexbox Baked keyframes At that moment Reduced motion No No Yes Yes Yes Yes Yes No Audio MP4 only No No No No No No No
Strokes# Feature Video / GIF / PNG Lottie Web (HTML, React, CSS, Web Animations) SwiftUI SVG (Figma) Trim start, end, offset Yes Trim Paths pathLength and dashes.trimYes Reverse, From Centre, stagger Yes Sampled groups One element per part (CSS: reverse and centre only) No Yes Taper Yes Uniform width Uniform width Uniform width Uniform width Inside / outside borders Yes Centered on paths Yes Yes Yes Dashes and marching ants Yes Yes Yes (CSS: no dash animation) Static dashes Yes
The CSS export carries motion only: @keyframes and classes for transforms, opacity, keyframed blur, trims and shape morphs, which you apply to your own elements. Its paint column is therefore “Yours”: style the elements as you like.
Feature Video / GIF / PNG Lottie HTML / Web Animations / React SwiftUI CSS SVG (Figma) Linear and radial gradients Yes Yes Yes Yes Yours Yes Angular gradients Yes Linear Conic on boxes, linear on paths Yes Yours Linear Animated gradients Yes Sampled 30 fps Boxes and text No No At that moment Masks Yes Yes Yes Yes No Yes Drop shadows Yes Yes Yes Yes Yours Figma effects Inner shadows Yes No Boxes No Yours Figma effects Layer blur Yes Static only Yes Yes Keyframed blur Yes Background blur, glass Yes No Yes Glass only Yours No Motion blur Yes One axis Yes No No Yes Zoom blur Yes No No No No No Color adjust, fade Yes No Yes Yes Yours Partly Blend modes Yes Yes Yes Yes Yours Yes Independent corners Yes Path (sampled when animated) Four-value border-radius UnevenRoundedRectangleFour-value border-radius Path Video layers Exact frames Poster frame Muted <video> Placeholder Setup notes Poster frame Video fades Picture and sound Opacity keys Opacity keys Opacity keys Opacity keys At that moment Images Yes Embedded Inlined Setup notes Yours Embedded once Fonts Rendered Name and origin Inlined or linked Font.custom + notes@import, @font-faceText layers SF Symbols Yes Placeholder circles Yes Yes Yours Yes
Warning A cell that says “No” doesn't block the export; that part is left out or flattened, and Lottie and SVG tell you in a note or comment. Check the result in the player or app you'll ship with.
You need Use A post, a review, a Keynote slide MP4 (or GIF) An animated icon or illustration in an app Lottie A working component in a React app Motion (React) A working view in an Apple app SwiftUI Plain web, no dependencies Web Animations, or CSS for simple cases A link to show someone Share link (HTML) Design files SVG (Figma)
Note Known gaps from the roadmap: width, height and radius states in SwiftUI and CSS; scroll progress and pause/reverse in SwiftUI; gradient colors per state; shared-element morphs in React; component export for scenes that also have states; children only another variant shows in HTML; text animations in custom fonts; and font files copied next to code exports.
Related articles# Easing and springs Reference Next MCP tools reference Reference 