Motion Tokens let you control any animation property, such as text, colors, transforms, and layouts from code at runtime. One file, infinite variations.. This could include updating text to match the score of a game, the position of a layer to handle drag-and-drop, or changing scale to display the progress of a loading bar.

Under the hood, Motion Tokens use the Slots API in dotLottie. Developers use this API to connect tokenized properties to live data.

What Can Be Tokenized?

Motion Tokens expand what used to be “slots” to include more powerful properties:

• Text – content, font, size, and alignment
• Colors – solid colors
• Gradients – multi‑stop gradient control
• Position – X and Y coordinates
• Scale – vertical and horizontal
• Rotation – 0-360 degrees
• Opacity – transparency values
• Skew/Skew Axis

🎮 In Creator

Motion tokens begin their life in Lottie Creator. They can be accessed at first through a little dropdown chevron button that appears next to each property when hovered.

Just give a descriptive name to your token so you remember what it does later.

After tokens are created, they can be accessed via the Motion Tokens manager on the floating panel.

In the Motion Tokens manager, tokens can be edited and themes can be created. When you edit tokens here, you are permanently altering the default values. This is different from how tokens are used later in your project, where editing them does not result in permanent change.