Evolution of Web Animation. My decision to swap Lotties for Rives
Animations were part of my professional life for almost two decades and still are. So, I decided to make a brief overview of this technology, going way back in time and tracing it to the present day. Yesterday I made a few Rive-based state machine components for a mobile app, and I thought it might be cool to pay some tribute to this wide professional area.
The Early Web & Flash Era (mid-1990s – ~2010) The earliest web animations were crude and pretty ugly - animated GIFs and Java applets that were heavy and clunky. Macromedia Flash (later Adobe Flash) changed everything by offering a self-contained runtime with a timeline editor, vector graphics, ActionScript programming, and eventually video playback. It became the de facto standard for anything interactive or animated on the web.
My personal take on Flash: I loved working with Flash - since 1996 when I made my first interactive animated website and hosted it on FortuneCity, throughout making interactive .swf components for the Prezi presentation software (before they switched to HTML5), till cool web banners. To this day, I remember a Japanese company that made something like a Flash movie; it was incredible in detail. I also used Flash with some pseudo-3D software.
The problem, though. Flash, see, had a few problems though - it was a proprietary plugin, a black box invisible to search engines, riddled with security vulnerabilities, and notorious for battery drain. It couldn't run on Apple's iPhone, and Steve Jobs' 2010 open letter "Thoughts on Flash" was both a death certificate and a call to arms for open web standards. The fundamental problem was clear: the richest parts of the web were locked inside a single company's plugin. Suck it, Adobe!
CSS3 & jQuery Animations (~2009 – 2014) The open web responded with CSS3 transitions, keyframe animations, and JavaScript libraries like jQuery, making DOM animation accessible to every front-end developer. For the first time, you could animate elements natively in the browser without any plugin. This was a huge leap for UI/UX - hover effects, page transitions, and micro-interactions became standard practice.
My personal take on CSS3 and HTML5 Animations. Honestly, I went back through Mootools, Dojo, and finally jQuery throughout the years - I always looked to make something more interactive. jQuery enabled me to create more original-looking websites and more interactions, and while I was still using excessive Flash up to 2015, I knew a change was coming. Still, HTML5 was not mature enough. By this time, I also made my first hybrid app for Del Posto, based on PhoneGap and Angular 1.4.5. Cool experience, but jQuery wasn't the peak of performance.
The problem with HTML5 and CSS. CSS animations were limited to property interpolation (opacity, transform, color), and jQuery's approach of animating DOM styles frame-by-frame was inefficient and janky at scale. There was no good answer for complex sequenced animations, particle systems, or anything resembling rich motion design. The web had freed itself from Flash but lost much of its expressive power in the process. All the interactiveness, vector manipulation - gone!
HTML5 Canvas & WebGL (~2011 – 2017) The Canvas API introduced a bitmap drawing surface directly in the browser — a blank 2D slate you could script pixel by pixel. This unlocked games, data visualizations, and generative art without plugins. WebGL went further by exposing OpenGL ES to JavaScript, enabling GPU-accelerated 3D rendering right in a browser tab.
My personal take: I fell in love with GSAP in 2013 as it progressed toward support for CSS3, Canvas, and WebGL, and I knew the time for a change and for interactivity had come. Back then, I registered HTML5.bg and obtained permission from the W3 consortium to make the logo you are currently seeing on https://html5.bg - all this with the idea to educate on modern HTML5/CSS3/JS and to infuse our work with interactive, lightweight animations, complex logic, and to make it generally better looking than a simple website. Around 2015, Prezi switched its engine to HTML5, and they just lost the presentation interactivity race back then, although they remained a pretty cool tool till today. So I can confidently say - we were pioneers back then.
The problem with the new technological enablement: The learning curve: Canvas required manual render loops and state management, and raw WebGL was brutally low-level - hundreds of lines of shader code and buffer management just to draw a triangle. These were powerful primitives, but they were exactly that - primitives. Most designers and many developers couldn't realistically use them for production work without significant abstraction layers on top. Including me - I was focused on working with GSAP as an abstraction layer, just because it was time-consuming to work directly with WebGL / Canvas.
The Modern Toolkit: Three.js, GSAP, Lottie & Rive (2017 – present) Today's ecosystem is built on mature abstractions that make the underlying power accessible. Three.js wraps WebGL in a scene-graph API that lets developers build 3D experiences without writing shaders by hand - it powers everything from product configurators to immersive storytelling. GSAP (GreenSock) became the industry standard for timeline-based animation, offering precise sequencing, easing, and performance that CSS alone can't match, with a consistent API across DOM, Canvas, and SVG. Lottie solved the designer-developer handoff problem by letting motion designers export After Effects compositions as lightweight JSON files that render natively on web and mobile — though it's limited to pre-baked, non-interactive playback. Rive represents the latest evolutionary step, combining a dedicated design tool with a custom runtime and built-in state machines, enabling truly interactive, event-driven animations that respond to user input in real time. It's arguably the closest the open web has come to recapturing Flash's creative versatility — without the proprietary baggage.
My take on this last slice of time. I am currently making a cool health-tech app.p I will probably talk and write a lot, as soon as it hits the market, but one aspect is that it needs to have a "human approach" towards patients - no blue, medical experience, as this is as depressing as a hospital. This involves a lot of interactivity, gamification, and animations, like those in Duolingo. Yeah, I know they might not be the best example following the last hurdles with them, but nobody can deny their animations are cool!
I was making these with Lottie, but it required online wasm loading (app was not fully offline first), the animations were heavy, as the lotties required quite a payment per year to export them optimized, and finally - no interactivity. I was using Adobe After Effects to build, then to export the animations, bought so many different softwares like joysticks and sliders, learned about rig systems, just to face at some time incorrect export and to have bounced off some designers I asked for help that ensured me there is no way to make programmable rig - all shall be done in hand. Every pose of my character, every face expressions, as the J&S, and other rig tools for Adobe did not allow proper lottie export.
There Rive shone with their State Machine, the responsiveness of the animations, and the performance. It comes with a bone system, an integrated joystick and sliders, tailored for animation export. With some tweaks, I made canvas .wasm self-hosted, and this made everything so light and fast right now that I am going to rewrite some of the original app parts from GSAP to Rive, and I will get rid of Lotties completely. This gives me a couple of perks - programmable animations, all living in one place (e.g., all perks ribbons in a single rive file), and an interactive character that can now react and respond to data. Speex of implementation - x10. And at some point,t if I decide to go full native with the app, it has support for both iOS / Android via SDKs. I think this is the peak for 2025-2026 as a tool for fast, responsive, and programmable animations. So yeah, here we are! :)