From Flash to Lottie to State Machines: The Evolution of Web Vector Animation
How web vector animation moved from Flash and ActionScript to Lottie's After Effects exports and then to state-machine runtimes, and what each step changed.
Core Takeaway
Flash combined vector animation and interactivity in one tool, but it ran in a plugin that Adobe stopped supporting after December 31, 2020. Lottie brought vector animation back by playing After Effects animations, exported as JSON with Bodymovin, natively on web and mobile, but those animations only play. State-machine runtimes such as Rive and ExodeUI add interactivity back into the design file.
Flash: animation and logic in one place
Flash let designers draw vectors, animate them on a timeline and add behaviour with ActionScript, all in one file. It powered games, ads and whole websites. Its weakness was the plugin: it ran outside the browser's own technologies, with persistent security and performance problems. Adobe ended support for Flash Player after December 31, 2020, and blocked Flash content from running from January 12, 2021.
Lottie: vectors without the plugin
Lottie, from Airbnb, parses Adobe After Effects animations exported as JSON with the Bodymovin plugin and renders them natively on web, iOS, Android and React Native. It made rich vector motion practical in apps again, and it is still the most widely supported format for animations that simply play.
The missing piece: interactivity
Lottie files describe a timeline, not behaviour. Making a Lottie animation respond to hover, loading or success means writing code around the player. Flash had that behaviour built in; the plugin-free world lost it.
State machines: behaviour in the file again
State-machine runtimes bring the Flash idea back without the plugin. Rive lets you design vector animation and wire it to a state machine whose inputs your code controls. ExodeUI, which we make, applies the same idea to product UI, adding layout, spring physics and logic in one open JSON file played by runtimes for React, SwiftUI, Flutter and more.
Key Principles to Remember
- Flash combined vector animation and interactivity in a plugin
- Adobe ended Flash Player support after December 31, 2020
- Lottie plays After Effects animations exported with Bodymovin, natively
- Lottie animations play; interactivity needs extra code
- State-machine runtimes bring authored behaviour back into the file
Frequently Asked Questions
Sources
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive docs