# Motion Tokens Take Lottie Creator to New Heights *By George Dikun · February 24, 2026* Motion Tokens enable data-driven animations that update text, colors, and transforms in real time. --- Hey everyone, George here. With [State Machines](https://lottiefiles.com/state-machines) and [Theming](https://lottiefiles.com/theming), we’ve brought a ton of versatility to the dotLottie file format. However, one glaring issue still remained: designers could create amazing and functional animations, but they were essentially one-off animations that couldn’t scale easily. ## Introducing Motion Tokens [Embedded content](https://player.vimeo.com/video/1167746327?app_id=122963) Motion Tokens are a way for your animations to respond to real data and to be modified at runtime. The designer sets up the tokens and connects them to a whole range of properties like position, scale, color, gradient, and opacity, giving the developer an easy target to hook into in their code. This is all made even easier with our [new API](https://github.com/LottieFiles/dotlottie-web/wiki/Slots-API). Explore Motion Tokens ### Motion Tokens in Lottie Creator In Lottie Creator, it’s as easy as choosing a property and selecting “Apply token”. ![](https://blog-cdn.lottiefiles.com/2026/02/Create-token.gif) These are then stored within the Motion Tokens manager, where you can edit them or organize them into themes. And of course, Themes have been expanded to include many more properties than just color. ![](https://blog-cdn.lottiefiles.com/2026/02/token.png) ## Build functional UI with Motion Tokens This is the kind of update that changes one thing and opens up a TON of creative opportunities. Like check out this weather widget, made entirely in Lottie Creator. .weather-embed { max-width: 1040px; width: 100%; margin: 20px auto 10px; } .weather-embed iframe { width: 100%; height: 640px; border: 0; border-radius: 18px; display: block; } This was accomplished by adding a few text content motion tokens for the city name, temperature, and weather type. But on top of that, it has a bunch of little weather animations that use opacity tokens to selectively display them. Then we just hooked those tokens up to some logic using a weather API in code, and the result is a fully functional widget. The best part is that this behavior, including the little UI to change the location, was created by one of our designers who has no experience with code. I just repurposed a dotLottie [skills.md](http://skills.md) doc from our DevTooling team and added a bit of direction to make it suitable for designers. She just dropped the doc into ChatGPT along with her animation and told it what she wanted. ChatGPT even provided the API to make it pull real weather data. Here’s that doc if you want to use it, too. Download Motion Tokens.md file Motion tokens make it very simple for AI to output usable code, because they greatly simplify the code necessary for data-driven motion. In theory this should eliminate designer-developer hand off miscommunication. ## Personalized animations with real user data Imagine you had a birthday cake animation and you wished to ship it to users on their birthday. In the past, there would be no reasonable way to personalize it for each user, such as by adding their username to the cake. Motion Tokens make this trivially easy. Now the user can just create a text token for the username text layer and tell the developer when to update it. Here’s that example in reality, but with the added complexity of having the number of candles on the cake reflect the user’s age. .cake-embed { max-width: 900px; width: 100%; margin: 20px auto 10px; } .cake-embed iframe { width: 100%; height: 680px; border: 0; border-radius: 16px; display: block; } We’ve also added a little UI to edit the tokens while the Lottie is playing. To get the number of candles to change, we just created the 10 candles and then gave each of them a unique opacity token, something like “candle\_1\_opacity”, and then changed the opacity at runtime with a simple for-loop in code. And again, this was done entirely without developer help. The designer just used that AI skills doc and prompted this in one shot. It really is just that easy. ## Position, color, and gradient control at runtime Text and opacity are only a small part of what you’re able to attach tokens to. All transform properties like size, position, scale, and skew are also exposed to motion tokens, as well as color and gradient. This effectively enables behavior never seen before in Lottie animations, most notably drag-and-drop functionality. .planet-embed { max-width: 900px; width: 100%; margin: 20px auto 10px; } .planet-embed iframe { width: 100%; height: 950px; border: 0; border-radius: 16px; display: block; } This was achieved by adding a position token to the draggable layer and then prompting ChatGPT that it should be able to be drag-and-dropped. It updates the position token to match the mouse position plus a bit of other math and logic that our designer didn’t even have to consider. .password-embed { max-width: 900px; width: 100%; margin: 20px auto 10px; } .password-embed iframe { width: 100%; height: 630px; border: 0; border-radius: 16px; display: block; } This one is pretty unique, even though it’s probably slightly outside dotLottie’s intended use case. As the user types the password, the obfuscation dots appear and the character’s eyes follow the end of the password, all while the character animation is playing. This behavior is all within the dotLottie, including the password dots. It would be more efficient just to have the text input and character separate, but it’s still really cool that you can technically create full dynamic UI with dotLottie. ## What this unlocks for design teams With this update, Lottie has opened up so many new possibilities for creative implementation of motion design. Designers can now make animations that scale with their projects. Rather than having to export tons of variants of an animation, they can export a single dotLottie that can adapt to a plethora of specific needs. For more in-depth info and guides on Motion Tokens, feel free to explore [our documentation.](https://www.notion.so/lottiefiles/Motion-Tokens-30332f8a3abd80cc90d3e893bb44953f) Try Motion Tokens in Lottie Creator --- ## Related Articles - [How to Create Animations with AI Using Lottie Creator WebMCP](/blog/working-with-lottie-animations/how-to-create-animations-with-ai-using-lottie-creator-webmcp) - [How to Build Your First Lottie Creator Plugin: Create and Animate a Rectangle](/blog/working-with-lottie-animations/how-to-build-lottie-creator-plugin-create-and-animate-a-rectangle) - [How to Develop and Publish a Plugin for Lottie Creator](/blog/working-with-lottie-animations/how-to-develop-and-publish-a-plugin-for-lottie-creator) - [How to Publish a Lottie Creator Plugin to Extensions](/blog/working-with-lottie-animations/how-to-publish-a-lottie-creator-plugin-to-extensions)