Webflow supports Rive

The big news: Rive is now a native format in Webflow. That means you can drag and drop Rive’s production-ready graphics into your Webflow project and connect them to Webflow interactions. No workarounds, no extra steps. This is huge for Webflow users who want to add state-driven animations to their sites. 

You’ll have access to custom properties like layout, autoplay settings, touch scroll, and even event handling. The coolest part? Rive works flawlessly with Webflow interaction, so you can link animations to user actions such as hover, click, and scroll.

How it works

Here’s the rundown on how easy it is to get your Rive animations into Webflow:

1. Upload your Rive file to Webflow’s asset panel 

2. Drag and drop your Rive file into the canvas or navigator

3. Setup the artboard and state machine you want to use

4. Connect Rive’s state machine to triggers like hover, click, scroll, and more with Webflow Interactions

For those who like to tweak code, Rive Runtimes are fully supported with Webflow’s custom code feature.

Why Rive and Webflow teamed up

If you’re all about creating slick, responsive websites without getting lost in the code, Webflow is already your go-to. It’s a visual-first platform that lets designers, marketers, and devs design, optimize, and scale web experiences — without needing to write a single line of code. Rive, on the other hand, takes interactive animations to whole new levels, letting designers build real-time, responsive graphics across any platform. Rive files are tiny, wicked fast, and highly interactive. 

Webflow’s visual development platform and Rive’s low-code interactivity are a natural fit. Together, they’re part of a growing movement in SaaS tools that are transforming how software gets built — faster, smarter, and more creatively.

Start building

If you’re looking for a way to add next-level animations to your site without overloading it, this is it. Rive in Webflow is here, and adding interactive animations has never been easier. Just drag, drop, and start building.