Animation Engine
Rive
Real, interactive Rive animations — vector graphics that react to hover, click, scroll or view at 60fps in a tiny file. Upload a .riv from rive.app, pick a State Machine for interactivity, and choose how it plays. Rendered on a canvas (no WebGL required); reduced-motion & no-runtime safe (falls back to a poster / the first frame). Loads only on pages that use it.
Live demo
See it in action
State Machine
A live State Machine
Click the car — it fires its “bumpy” State Machine trigger and bounces. State Machines carry inputs (triggers, booleans, numbers) you wire to clicks, hovers or scroll — real interactivity, all designed in the Rive editor, no code.
Trigger
Play on hover
Set Plays → On hover and the timeline runs only while the pointer is over it, pausing when it leaves — great for cards and icons. This one plays the windshield_wipers animation.
Trigger
Play when it scrolls in
Plays → When it scrolls into view — the animation waits, then runs as it enters the viewport (and pauses off-screen to save the battery). Click-to-play and scroll-scrub (drive a State Machine number input by scroll) are options too.
Events → your page reacts
A Rive event, handled by your page
Click the button. It fires a Rive Open URL event; with Emit a JS event on, the element re-broadcasts it to the page as a fwRiveEvent and the readout updates live — wire it to analytics, a modal, anything. Flip on Follow “Open URL” events instead and the same click would open the link on its own.
fwRiveEvent… click the button ↑Data binding
One file, values from the builder
Nothing on the card below is baked into the .riv. The name, the age, the colour swatch and the “agreed” flag are all set from the element’s Data bindings — change them in the builder (or drive them from live data) and the same file re-renders. A trigger binding fires on load to reveal the filled-in card.
How to set it up
Add it in under a minute
- Add a Rive element (builder palette → Animation Engine).
- On the Animation tab, upload your
.riv(or paste a URL). For interactivity, enter the State Machine name exactly as it appears in the Rive editor. - Choose how it Plays — Autoplay, On view, On hover, On click, or Scroll-scrub (writes the scroll % into a State Machine number input).
- On Style set the Fit, height and background; on Advanced add a fallback poster for reduced-motion / no-runtime visitors.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.