Rive
Rive makes animations that respond to the visitor. A product diagram can react to hover, a toggle can switch between states and an illustration can follow the cursor, all from one small file.
What Rive is
Rive is a design tool and runtime for interactive animation. Designers build artboards, animations and state machines in the Rive editor. The state machine decides how the animation responds to inputs, such as hover, clicks or values sent from the page. Files export as.riv and play through Rive’s runtimes for the web, iOS, Android and game engines such as Unity and Unreal.
How it fits on your site
Webflow supports Rive natively. You upload a.riv file, add it to the page as a Rive element and control it with Webflow interactions.
Framer plays Rive files through Rive’s official Framer plugin.
A typical use is an interactive product explainer. Visitors click through the product’s states, such as before and after, and see the change without watching a video.
Where the scope includes motion, we design the states in Figma and plan the Rive file around them.
What you get
A Rive file with the states and inputs the page needs
Playback connected to the site and tested on desktop and mobile
The.riv source file handed over with the site
What to watch out for
Agree the states first
A state machine is quicker to build when the states and triggers are settled before animation starts.
Fallbacks
Decide what shows if the animation doesn’t load. Keep key text on the page as real text.
Reduced motion
Respect the visitor’s reduced-motion setting for large or looping animation.
Editing later
Changes happen in the Rive editor. Keep the source file, and know who has access to it.
Questions about Rive
Daniel G. Bright
Founder, BrightStudios
Still have a question?
Book a call with me to talk through your project and agree the next step.
Related
Figma
Where identities, websites and templates are designed first, then handed to your developers or built.
Framer
Marketing sites your team can edit visually, with a component system and a CMS. We’re an Official Framer Expert.
Webflow
Structured websites with a flexible CMS and reusable components for ongoing publishing.
After Effects
Motion delivered as video, Lottie or native animation, depending on what the page needs.
Lottie
Light animation that plays on load, on click or as it scrolls into view.
Tell us what your site connects to
Share your product and the tools your team uses. We’ll recommend a scope and the simplest way to connect each one.