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

Supported Properties

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

•dotLottie Slots API
•
Skills doc for use with AI: DOTLOTTIE_SKILLS.md

For Designers

If you're a designer, you might want to try vibe coding the logic for your animation yourself — either for testing or to use as a demo. This guide walks you through how to do that with no coding experience.

We recommend using CodePen to quickly test code. It requires no setup.

Step 1 — Export Your Animation

Export your animation to Workspace as usual
Your Motion Tokens are automatically stored inside the .lottie file
Copy the Asset CDN link for the animation
Also download the .lottie file locally

You'll need both the CDN link and the local file for the next steps.

Step 2 — Open the CodePen Template

Use the prebuilt template: CodePen Template

The pen includes three files:

•HTML — almost done
•CSS — done
•JavaScript — where all the fun happens

In the HTML file, paste your Asset CDN link into the provided spot:

<canvas id="dotLottie-canvas" data-src="PASTE_YOUR_DIRECT_DOTLOTTIE_URL_HERE.lottie"></canvas>

Once that's set, you'll do all your work in the JS panel.

Step 3 — Vibe Coding with an LLM

You don't need to write all the code yourself. We've created a skills document that teaches an LLM how to control Motion Tokens correctly.

What you'll need:

•
MOTION_TOKENS_SKILLS.md
•Your .lottie file

First prompt (important): Drag both files into ChatGPT (or your LLM of choice) in your very first message. This gives the model everything it needs to understand:

•What Motion Tokens exist in your file
•Their names and types
•How to update them at runtime

Example prompt:

I want the square to turn yellow and back to blue every second. I want to be able to click and drag the square. When I am dragging, I want it to rotate 15 degrees. The text should change to "Dragging" when I'm dragging, or turn back to "Drag me" when not.

The LLM will generate a complete JavaScript file that updates Motion Tokens correctly. Copy and paste the output directly into the JS panel in CodePen.

Debugging Tips

•The first output may not be perfect — that's normal
•If the code is partially wrong, describe what's broken and ask for a fix
•If the LLM returns only snippets, ask for the full JS file

Motion Tokens in Code