Motion Tokens
Motion Tokens let your animation change while it’s running.
Motion Tokens let your animation respond to real data at runtime without exporting a new file every time something changes.
For examples, one animation can handle live scores, drag interactions, loading progress, color themes, and more.
Motion Tokens are built on top of “Slots” in the Lottie file format.
Think of Slots as the technical foundation, and Motion Tokens as the user-friendly way to control those properties inside Creator. Developers can connect Motion Tokens to real data in their projects using the Slots API in dotLottie.
What you can change?
Text, colors, gradients, position, scale, rotation, opacity, and skew.
How to Use Motion Tokens In Lottie Creator
1. Create a token
-
Hover over a property.
-
Click the small dropdown arrow.
-
Create a Motion Token.
-
Give it a clear name.
2. Manage tokens
-
Open the Motion Tokens Manager.
-
Edit default values.
-
Create themes (groups of styles).
⚠️ Changes made here are permanent.
In Workspace, you can:
-
Test token values
-
Try different themes
-
Preview how it will look in production
Changes here are not permanent. You can reload or press Reset Defaults to undo them.
In Code (Optional)
Developers can connect Motion Tokens to real data using the Slots API.
This lets the animation update automatically, react to app state and work like part of the UI.