How to add a Rive animation on Webflow (Ultimate Guide)
What is Rive?
Rive is state of the art animation tool designed to create interactive animations that run across platform.
Rive is a our go-to tool at Motion Gurus for creating animations. The main reasons to not use Lottie is because Rive files are tinier in comparison to Lottie files and because the Rive workflow is a joy.
On September 18, 2024, Webflow released native support for Rive files. This means that we now have two alternatives for adding Rive animations to our Webflow site.
Basic and simplest method
You can now upload a .riv file directly on Webflow, drag and drop it to the canvas and off you go.
With the simpler method you can easily control the animation using Webflow Interactions.
But, that are cases in which you may prefer not to use Webflow Interactions to handle different states of the animation.
This may be because you have a preference of handling animations with javascript or because you may experience that Webflow Interactions at a certain point is making your site slower.
For that reason, below is a more advanced way of implementing Rive on Webflow.
Advanced method
1. Host the Rive on Webflow
Upload the file to Webflow and after uploaded get the url for the Rive file.
2. Embed a canvas element
Once you have the file hosted, add a code embed on Webflow and past this snippet. This is where your animation will appear.
<canvas id="rive-animation" style="width: 100%; height: 100%;" </canvas>
3. Style the code embed
For the animation to be responsive you will need to give the embedded canvas the class name rive-canvas and give it the following CSS values:
- Give it a
max width - Set
ratiowithwidthandheight. This values should be the exact sizes as theartboardon Rive.
- Set
fittocover.
Friendly reminder: Don't confuse the class rive-canvas with the id rive-animation. They are two different elements needed to make the animation work.
4. Wrap that embed in a div.
Next, you will want to wrap the canvas element in a div and give that div an id. For example, rive-animation-wrapper.
This id will allows you to trigger a hover animation when the user hovers over a parent container, like this animations on our home page:
5. Paste CSS inside <head> tag
The following code makes the class you created on step 3 responsive.
<style>
.rive-canvas {
width: 100%;
height: 100%;
margin: auto;
display: block;
}
</style>
6. Paste javascript before </body> tag
The following code loads the Rive js runtime and triggers the animation.
Mission critical: Make sure to replace within the code the following:
wrapperId corresponds to the ID for the parent div you created on step 4.canvasId corresponds to the ID for the canvas element you created on step 2.src corresponds to the url where the .riv file is hosted.
Additionally, ensure that the following names match the exact names you have on the Rive file:artboard corresponds to the artboard name on Rive.stateMachines corresponds to the state machine name on Rive, this is usually by default "State Machine 1".Input name for hover If you want the hover effect to be triggered when the user hovers over a parent div, ensure that the input has the exact same name.
Here is the javascript code:
<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const animations = [
{
wrapperId: "rive-animation-wrapper",canvasId: "rive-animation",src: "https://yourcdn.com/rive-file.riv"
}
];
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
console.log("Entry:", entry);
if (entry.isIntersecting) {
const config = animations.find(animation => animation.wrapperId === entry.target.id);
if (config) {
console.log("Initializing animation:", config);
initializeRiveAnimation(config.wrapperId, config.canvasId, config.src);
observer.unobserve(entry.target);
}
}
});
}, { threshold: 0.8 });
animations.forEach(animation => {
let wrapper = document.getElementById(animation.wrapperId);
if (wrapper) {
console.log("Observing wrapper:", wrapper);
observer.observe(wrapper);
} else {
console.error("Element not found for ID:", animation.wrapperId);
}
});
function initializeRiveAnimation(wrapperId, canvasId, src) {
console.log("Initializing Rive animation for:", wrapperId, canvasId, src);
const r = new rive.Rive({
src: src,
canvas: document.getElementById(canvasId),
autoplay: true,
artboard: "Artboard",
stateMachines: ["State Machine 1"],
onLoad: () => {
const inputs = r.stateMachineInputs("State Machine 1");
let hoverInput = inputs.find(i => i.name === 'Hover');
let wrapper = document.getElementById(wrapperId);
wrapper.addEventListener("mouseover", () => {
hoverInput.value = true;
});
wrapper.addEventListener("mouseout", () => {
hoverInput.value = false;
});
r.resizeDrawingSurfaceToCanvas();
}
});
}
});
</script>
Conclusion
Rive is a world-class animation platform and Webflow's support for it is a
sign that Rive will grow massively in the near future.
You can now simply drag and drop a Rive file on to Webflow and you are good to go. For more advanced implementation you can use the javascript code I've shared above.
If you need any help or have any questions, feel free to reach out—we're always here to assist!
.svg)