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.
With that said sadly Webflow does not support Rive files.
This makes adding a Rive animation on Webflow more complex than a Lottie but still not rocket science.
In this tutorial I'll share with the 6 things you need to do to get your Rive animation on your Webflow site using the Javascript runtime.
You can also add it as an iframe but that is not our preferred method.
Lastly this steps focus on Webflow yet the steps are exactly the same whether you are using Wordpress or Wix.
1. Host the Rive file
Like I mentioned above, you can't today host your Rive files on Webflow.
For that reason, you will first need to host your Rive file (.riv) on your CDN.
The easiest and cheapest way to do this is to use Uplodecare (non affiliated).
Friendly reminder:
1. If you use host the Rive file with AWS or Firebase don't forget to enable CORS, else the animation won't run.
2. Don't confuse the .riv with .rev. The former (.riv) is the optimised file for runtime and the latter (.rev) is the file you can import into Rive to make changes to the animation.
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
In conclusion, while integrating Rive animations into Webflow presents some unique challenges, it's entirely achievable with the right steps.
By self-hosting your Rive file, embedding and styling the canvas, wrapping it in a div, and adding the necessary CSS and JavaScript, you can bring interactive animations to your website seamlessly.
Remember, this method works not only for Webflow but also for platforms like WordPress and Wix.
If you need any help or have any questions, feel free to reach out—we're always here to assist!
.svg)