DEVOURED
Control Lottie Animations with Real Data (Website)
LottieFiles introduces Motion Tokens, letting developers change animation colors, text, and transforms at runtime without re-exporting files.
What: Motion Tokens is a new feature in LottieFiles' Lottie Creator that allows developers to mark animation properties as runtime-editable tokens, then bind them to real data and modify them programmatically without regenerating the animation file.
Why it matters: This removes a major friction point in the design-to-development workflow where every small change to animation content—like updating text, swapping colors for theming, or localizing content—previously required designers to re-export files and developers to replace them.
Takeaway: Try defining tokens in Lottie Creator by marking properties as editable, then export as dotLottie format to control them via the runtime API on web, iOS, or Android.
Deep dive
- Motion Tokens expose animation properties (colors, text, transforms) as runtime-editable variables that can be bound to product data without modifying or re-exporting the animation file
- The workflow involves three steps: define tokens in Lottie Creator by marking properties as editable, export as dotLottie format, then control values programmatically at runtime via API
- This addresses a core pain point where any animation update—changing a headline, swapping a color, adding a language—required designers to re-export files and developers to swap them out
- The feature enables animations to respond to product state, including live data updates, personalization, theming (light/dark mode), and dynamic content based on user context
- Theming is built on Motion Tokens, allowing teams to define multiple variants (light, dark, branded) in a single file and switch between them at runtime via API
- Motion Tokens integrate with design systems using the same logic as color and typography tokens, maintaining consistency across static and animated elements
- The system includes AI-powered theme generation where developers can describe a theme and get token values automatically, then fine-tune manually
- Runtime guarantees include deterministic behavior, versioning embedded in the dotLottie file, stable API across platforms, and property changes without re-rendering
- Cross-platform support works consistently on Web, iOS, and Android with the same runtime API
- Example use case shown is a weather widget where selecting different cities updates both data and visual elements dynamically within the animation
Decoder
- Lottie: An animation format based on JSON that renders vector animations exported from After Effects, widely used in apps and websites for lightweight, scalable motion graphics
- dotLottie: A file format from LottieFiles that packages Lottie animations with additional metadata, assets, and features like theming and interactivity
- Motion Tokens: Runtime-editable variables within Lottie animations that expose specific properties (color, text, transform) to programmatic control without re-exporting the file
- Runtime API: The programming interface that allows developers to control token values while the application is running, changing animation properties on the fly
Original article
Bind your Lottie animation properties to real data. Change colors, text, and transforms at runtime, without re-exporting.
Explore all 66 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi