Motion tokens make Lottie animations extremely versatile, but they require the logic to be programmed. This guide is a reference for both developers and designers for how to implement motion tokens in code.

The following properties can be bound with motion tokens:

• Text – content, font, size, and alignment
• Colors – solid colors
• Gradients – multi‑stop gradient control
• Position – X and Y coordinates
• Transform – scale and rotation
• Opacity – transparency values
• Skew/Skew Axis

For Developers

Here are some helpful links for developers.

• dotLottie Slots API: https://github.com/LottieFiles/dotlottie-web/wiki/Slots-API

• Skills doc for use with AI:

  DOTLOTTIE_SKILLS.md

For Designers

If you’re a designer, then you might want to try vibe coding the logic for your animation yourself, either for testing purposes or to use as a demo. This is a quick guide for how you might be able to accomplish this if you have no coding experience.

At LottieFiles, we tend to use Codepen to quickly test code, but it can also be useful here since it requires no setup.

1. Export Your Animation

• Export your animation to Workflow as usual
• Your Motion Tokens are automatically stored inside the .lottie file
• Copy the Asset CDN link for the animation