Better in English?
Better in English? Switch the website language for a better experience.
Webflow is officially opening the door to Rive, the vector animation format built for the web and apps. In practice, you can now import Rive files directly into your Webflow assets, or connect self-hosted files, to create interactive animations without relying on heavy videos or rough-around-the-edges GIFs.
Two levels of use are on offer. The first, through a native Rive element in the Designer, lets you add an animation in a few clicks, no code needed. The second, more advanced option, relies on Rive Runtimes paired with Webflow custom code, to precisely control your animation's states and transitions based on visitor interactions.
Webflow announced a gradual rollout over 24 hours starting September 18, 2024. The feature is listed under the Designer category in the official changelog.
The Rive format is built on vector logic and an optimized rendering engine, designed from the ground up for the web. The result: files that are considerably lighter than an MP4 video or an animated GIF, with a visual output that is often richer and, above all, interactive.
That last point is what truly changes the nature of the game. A video plays on a loop, so does a GIF. A Rive animation, on the other hand, can respond: switching states on hover, progressing on scroll, transforming on click. This moves beyond simple visual dressing and into a genuine, living interface logic.
| Format | File size | Interactivity | Typical use case |
|---|---|---|---|
| GIF | Heavy | None | Basic micro-animation |
| MP4 video | Very heavy | None | Product demo |
| Lottie | Light | Limited | Linear animation such as logos, illustrations |
| Rive | Very light | Advanced (states, interactions) | Interactive interface, product storytelling |
There are two possible paths, depending on the level of sophistication you're after:
In both cases, the animation stays hosted and served efficiently, without relying on an external video player or dragging down your page weight and Lighthouse score.
Let's be honest: at Mazette.co, we follow announcements like this with fairly unrestrained enthusiasm. Rive in Webflow is exactly the kind of feature that lets us keep a promise we repeat often to our clients: animation is not a gimmick, it is a tool for conversion and brand recall, as long as it stays lightweight and intentional.
What we particularly like is that Rive fills a real gap. Until now, getting a genuinely interactive animation on Webflow often meant tinkering with bits of code, third-party libraries, or settling for Lottie, which remains linear by nature. With Rive, you gain interaction finesse without sacrificing performance, something rarely achieved in the world of web animation.
A good animation is never the one you notice first. It's the one that makes an interface more intuitive without ever slowing the page down.
Our only reservation, and it's almost cosmetic: as with any new creative capability, there's a risk of overusing it. A Rive animation on every button, every icon, every transition, and you're right back in the trap of a site that flickers everywhere for no good reason. At Mazette.co, we love animations that serve a message, not ones that decorate just for the sake of it. It's a principle we explore further in our article on the subtle art of bringing interfaces to life.
Strategically, this announcement also confirms a broader trend: Webflow keeps absorbing native building blocks that used to require third-party tools or custom development. That's good news for our clients, since it means sites that are faster to deliver, easier to maintain, and above all better performing when it comes to load times, a criterion that increasingly weighs on SEO and the overall user experience.
If you have a project where animation could genuinely make a difference, without ever tipping into excess, this is exactly the kind of subject we love digging into together. Our Webflow expertise and our webdesign approach are built for that: interfaces that move just enough, at the right moment, for the right effect.
Code
Over 120 companies have already stepped out of the shadows with us.
Lottie plays linear animations, running from start to finish with no interaction possible. Rive goes further: its animations can respond to scrolling, clicking or hovering thanks to states managed directly within the file. For a Webflow site looking for fine-grained interactivity, Rive offers much more control, typically with a smaller file size too.
Not necessarily. The native integration through the Rive element lets you add a file and configure it directly in the Designer, with no code required. For more advanced use cases, like driving animation states based on complex interactions, you can use Rive Runtimes with custom code.
Quite the opposite, that is the whole point of Rive: the files are vector-based and compressed, making them noticeably lighter than videos or animated GIFs for an equal or even better visual result. Used well, this format improves performance rather than hurting it.
