# Create with Motion: The Complete Guide to Shipping Motion That Actually Scales

*By K Minglani · March 26, 2026*

Every other layer of your product stack has been standardized. Color, typography, spacing, components. Motion hasn't. Here's how to fix that.

---

Every other layer of your product stack has been standardized. Color, typography, spacing, components. Motion hasn't. Here's how to fix that.

💡

TL;DR

Motion is the only part of the UI stack with no standard format, no shared runtime, and no governance layer.

LottieFiles built all three: dotLottie (single-file format), ThorVG runtimes (same engine on every platform), State Machines (interaction logic inside the file), and DAM (version control + approval workflows).

The result: cross-platform animations that ship once and render identically everywhere. This guide shows you how to create with motion that survives design, handoff, and production with proof from teams that already have.

## The problem nobody talks about

Most teams treat animation like decoration. A loading spinner here, a page transition there. It looks fine in Figma. It ships okay on iOS. Then comes the cross-platform reckoning.

You try to get that same animation running consistently on Android and web, and suddenly the same file behaves differently. Colors drift. Timing shifts. The interaction logic that lives in one codebase doesn't talk to the other two.

The typical cross-platform animation workflow? A motion designer create in After Effects, exports a Lottie JSON or GIF, then an iOS developer implements their version, while an Android developer rebuilds it differently. Meanwhile, a web developer uses yet another player and nobody notices the drift until a design review two sprints later.

The result: the same animation re-implemented three, four, sometimes five times inside a single product. Not because anyone did anything wrong, but because there was no system. This guide is about learning how to create with motion reliably across teams, platforms, and releases; without creating technical debt.

## What makes motion different from every other design primitive

Every other layer of your product stack has been standardized. Font styles are design tokens. Colors live in shared systems. UI components are published libraries. But animation? Animation is tribal knowledge; rebuilt from scratch on every platform, in every codebase, by every new engineer who joins the team. Design systems define color, typography, and spacing. Very few define how things move. That's the gap.

When you create with motion at scale, it's a functional requirement, not a visual "extra." Traditional formats like GIFs or MP4s bloat the app, blur on Retina displays, and slow down time-to-interactive. Fixing this requires three things working together: a format, a runtime, and a governance layer.

## The foundation: dotLottie format

The starting point for any motion design system is a canonical file format; one that every platform can read, every tool can export, and every team can trust as the source of truth. [dotLottie](dotlottie.io) is that format.

Unlike raw Lottie JSON, dotLottie is a compressed archive that bundles animation data, images, fonts, themes (including dark mode), and interactive states via State Machines into a single file.

Features

Lottie JSON

dotLottie (.lottie)

Bundles assets

No

Yes

Themes / dark mode

No

Yes

Interactive states

No

Yes

File size

Larger

Up to 80% smaller

Single-file delivery

No

Yes

The most expensive part of creating with motion isn't creation -- it's translation. dotLottie eliminates this by serving as both the editable source and the production-ready deliverable. One file. Design and engineering look at the same thing.

## The consistency layer: cross-platform runtimes powered by ThorVG

A great format is only half the solution. If each platform uses a different rendering engine, animations will drift. [dotLottie Runtimes](lottiefiles.com/runtimes) solve this by running the same engine everywhere: ThorVG, an open-source vector graphics library. Web runs as WebAssembly (WASM). iOS via native Swift/Objective-C bindings. Android via native Kotlin/Java bindings. Same rendering logic. Same output. The "it looks different on Android" conversation disappears.

65K

4.7M

70×

npm installs/month, 18 months ago

npm installs/month, today

growth in 18 months

dotLottie Runtimes reduce memory consumption by nearly 70% vs legacy players. Files are up to 80% smaller than traditional JSON. When you create with motion using this stack, performance isn't a trade-off. It's built in.

## Killing glue code: Lottie State Machines

Interactive animation logic is traditionally written three separate times (once per platform) and kept in sync manually. A button with idle, hover, pressed, loading, and success states requires that logic rebuilt in Swift, Kotlin, and JavaScript.

[State Machines](lottiefiles.com/state-machines) eliminate this entirely. The interaction logic lives inside the animation file itself. Your app sends inputs. The animation responds. No cross-platform glue code required.

[Embedded content](https://www.youtube.com/embed/4aUkC0lSbyg?feature=oembed)

💡

Note

State Machines answer the question designers and engineers have always wanted to ask: "What if the interaction logic could live in the design file instead of the codebase?" Now it can.[](https://lottiefiles.com)

### Prompt to State Machines: intent to interaction logic, fast

Describe the behavior you want in plain language, such as "a button that shows a loading spinner on click, then a success checkmark after 2 seconds", and it generates the complete state machine structure.

[Interactive animation made with State Machines: hover over & watch it interact](https://lottie.host/embed/ced8e563-9431-43f6-9f97-002f4062cf23/g3KNjBHQb8.lottie?stateMachineId=StateMachine1)

The AI handles the scaffolding; you apply the craft. It's intent to interaction logic, the same way a senior engineer translates a product requirement into architecture, but in seconds.

## The governance layer: animation asset management

A motion design system without governance is just a collection of files.

[LottieFiles Digital Asset Management](lottiefiles.com/dam) provides version control with approval workflows, direct sync into Figma, After Effects, and Canva, SSO with role-based access controls, and a centralized workspace for motion, images, and design assets. Teams report saving an average of 13.5 hours per week by eliminating asset-hunting and broken handoffs.

[Embedded content](https://www.youtube.com/embed/cxHZdVgaUmQ?feature=oembed)

## The proof: teams that create with motion at scale

Brand

What they did

Results

**Gojek**

Migrated to dotLottie across 20+ products

89% file size reduction

**ET Money**

Swapped static banners for Lottie interactive graphics

450% higher CTR (2% to 11%)

**Walmart**

Built 60+ expressive animations for AI assistant Sparky

20-30 KB per animation (10% of GIF)

**Wise**

dotLottie for financial UX animations across teams

Faster workflow, brand consistency

**Kiwi**

Replaced static onboarding with interactive Lottie flows

3x funnel conversion, 10% fewer tickets

**Botim**

Hybrid raster + vector workflow in Lottie

95% smaller assets, 50% faster discovery

**Troo**

Video-first to Lottie-first pipeline

App size: 160MB to 53MB (67% drop)

**OK Cashbag**

Character-driven Lottie gamification

62% increase in daily visits

**GCOO (Gbike)**

Motion in towing zone guidance UI

32.5% drop in towing incidents

**Addressing the objections**

Common misconceptions

Reality

**"We can just use GIFs or MP4s."**

GIFs are fine for static sites. In a scaling product, they become technical debt. dotLottie shifts you from "media" to "data" -- 60fps at a fraction of the file size.

**"Integration will be a bottleneck."**

Lottie libraries remove the need for platform-specific rebuilds. Ship one player that handles every interaction.

**"We already have a DAM."**

Traditional DAMs are "motion-blind." They can't handle version control for runtime behavior or interaction logic.

**"Does Lottie support interactivity?"**

Yes. State Machines let you visually map out logic and ship it inside one dotLottie file. The dev just implements the file.

**"We use Figma. Do we need AE?"**

No. LottieFiles for Figma converts prototypes directly to production-ready Lottie. Lottie Creator provides a browser-native suite.

**"Performance on low-end devices?"**

ThorVG offloads rendering to the GPU more efficiently than CSS or traditional JS. No frame drops on older hardware.

## Open source, open standard, no vendor lock-in

Every core component of the LottieFiles motion stack is open source: the dotLottie runtimes, the ThorVG renderer, and the format specification itself. If LottieFiles disappeared tomorrow, your dotLottie files would still render identically using the open-source runtimes. The Lottie Animation Community (LAC), hosted by the Linux Foundation, is formalizing the Lottie format as an official open standard. LottieFiles is a founding contributor.

## Where LottieFiles fits in your stack

Workflow / use case

where the work happens today

Best LottieFiles entry point

GIF/video animation pipelines

Figma, Webflow, Framer, After Effects, Canva

Adobe After Effects (plugin)

Manual, one-off animation exports

Web, iOS, Android, React, Flutter

Figma (LottieFiles for Figma)

Repeated rebuilds of motion logic in code

CI/CD workflows and codebases

Lottie Creator (browser + AI Motion Copilot)

17 million designers and developers across 280,000+ companies already create with motion using LottieFiles. The question isn't whether your product needs motion. The question is: what breaks first without a system - cross-platform drift, interaction logic sprawl, or governance failure?

[Embedded content](https://www.youtube.com/embed/0OUeMo3QWEU?feature=oembed)

That's what dotLottie format, shared ThorVG runtimes, State Machines, and DAM governance deliver together. Not a craft exercise. A reliable infrastructure layer.

Ready to map motion to your stack? Book a 30-minute Motion Readiness Call. Our team will diagnose where animation breaks down for you today and leave you with two or three clear, actionable next steps. No sales pitch.

Book a 30-minute Motion Readiness Call