LottieFiles

Motion Tokens

Every animation property. Controlled by code.

Bind your animation properties to real data. Change colors, text, and transforms at runtime, without re-exporting.

Launch Lottie Creator

Watch video

Trusted by

16

million+ designers and

developers from over

280,000

companies worldwide

Still re-exporting for every update?

Your animations can't talk to your data. So every update becomes a re-export.

Data can’t drive motion

Motion is disconnected from product logic. Data changes but the animation doesn’t.

Every change means re-export.

Update a headline, swap a color, add a language requires you to re-export the file.

Content is hardcoded

Dynamic product content is trapped inside static media. Any change triggers a rebuild.

What changes with Motion Tokens

Expose animation values as tokens and bind them to real data at runtime.

How Motion Tokens work

1. Define tokens

Select any color, text, or transform in Lottie Creator. Mark it as a token and now that property becomes editable at runtime.

2. Export as dotLottie

3. Control at runtime

What teams are building with Motion Tokens

Production motion that responds to product state.

Live data

Connect with data

Boost user experience

Personalization

Drag and drop

Weather widget

Select a city to see live weather and dynamic visuals update instantly.

See full code

Check out more Motion Tokens examples here.

Theming, built on Motion Tokens

Themes + Tokens

Themes set the defaults. Tokens let code override any value at runtime.

One file, every variant

Light, dark, branded: define all variants in a single file. Switch at runtime via the API.

Fits your design system

Motion Tokens bring the same logic as your color and typography systems into your animations.

Generate themes with AI

Describe a theme. AI generates the token values. Fine-tune manually from there.

Runtime Guarantees

Built for production

Deterministic behavior: no hidden overrides.

Versioned inside the dotLottie file.

Controlled through a stable runtime API.

Works consistently on Web, iOS, and Android.

Change properties. No re-render required.

Read Documentation

Design teams love LottieFiles

Frequently asked questions

What are Motion Tokens in Lottie?

What are Motion Tokens in Lottie?
Motion Tokens let you control animation properties - text, colors, gradients, and transforms - from code at runtime. Design once in Lottie Creator, export a single dotLottie file, and update values in production without re-exporting.

To learn more about check out our Motion Token documentation.

What animation properties can Motion Tokens control?

  • Text - content, font, size, alignment.

  • Color - fill, stroke, gradients.

  • Transforms - position, scale, rotation, skew, opacity.

How do I update a Lottie animation at runtime?

Call the relevant Slot API based on the type of property (https://github.com/LottieFiles/dotlottie-web/wiki/Slots-API). Pass new values for any tokenized property - text, color, transforms. The source animation is never modified. Only the specific token value updates — no full re-render.

Do Motion Tokens work on Web, iOS, and Android?

Yes. Tokens are bundled inside the dotLottie file and controlled through the same runtime API across all platforms.

Can I use Motion Tokens with State Machines?

Yes. State Machines handle animation transitions and logic. Motion Tokens handle runtime property values. Use both in the same animation, or either one independently.

Can I use Motion Tokens for dark mode and theming?

Yes. Define light, dark, and branded theme variants in one dotLottie file. Switch themes at runtime through the API. No duplicate files.

Can I localize a Lottie animation without re-exporting?

Yes. Set up a text token for any text layer. Bind it to your i18n strings in code. One file works across every language.

Check out our support page for more