Ever wished to have something alive in your web page, not just static content and images? Are you looking to spice up your website with some visual appeal and interactivity? With Rive, You can make Stunning animations and interactions in your website. This post takes you through the steps and provides an example of how to embed Rive animations on your webpage.

Why Choose Rive?

What makes Rive so good when it comes to animations and how we can use the application in your webpage, but first let's go through a few things before checking out our tutorial. Rive is a powerful animation tool that enables you to create sophisticated animations at no code. With Rive, you can:

• Build animations that respond to user input
• Develop responsive animations across different device and screen sizes
• Export animations as HTML / CSS / JS

STEP 1: Design Your Animation

To start off, go to Rive. library and make a new animation. Rive has many great templates and examples to get you started, or design your animation from scratch.

Use Rive's user-friendly editor to insert more complex features like shapes, text or anything else into your animation and try different animations types and effects.

You can read more about creating animation in Rive in our article Creating an Animated Logo in Rive: A Quick Guide

STEP 2: Export Your Animation

After you made all of your animations, click the "Export" button in Rive.

STEP 3: Installation

In the first section, you need to install dependent packages. There are two ways to achieve this:

Method 1: Script Tag Installation Just put the below script tag in your HTML file.

<script src="https://unpkg.com/@rive-app/canvas@2.17.3"></script>

Method 2: npm/yarn Installation Run the following command in your terminal:

npm install @rive-app/canvas

import * as rive from "@rive-app/canvas";

STEP 4: Create a Rive Instance

Now that you have the dependency installed, it's time to create an instance of your art. The following properties you need to supply:

src: The URL or path to the. riv file.

canvas: The canvas element where the animation will live.

autoplay: A boolean value that detects whether the animation should be played without user involvement.

stateMachines: Name of the statemachine to play.

Simple example of Rive instance Creation

<script>     const r = new rive.Rive({
         src: "https://cdn.rive.app/animations/vehicles.riv",
         // OR the path to a discoverable and public Rive asset
         // src: '/public/example.riv',
         canvas: document.getElementById("canvas"),
         autoplay: true,
         stateMachines: "bumpy",
         onLoad: () => {
           r.resizeDrawingSurfaceToCanvas();
         },
     }); </script>

STEP 5: Loading Rive Files

Rive files is loaded from three ways.

Hosted URL: Load the .riv file from a hosted URL by setting the src attribute.

Static Assets: Load the .riv file as a static asset in your web project.

Fetching a File: Load the .riv file as an ArrayBuffer using the buffer attribute.

STEP 6: Cleaning Up Rive

Whenever you are done displaying the canvas (and no longer needs to keep it alive), don't forget to clean up your rive instance. Clean up the Rive instance by calling:

const riveInstance = new Rive({...)); ... // When ready to cleanup riveInstance.cleanup();

How to integrate Rive animation into Webflow

Here is How you can use Rive animations to Webflow

1. Click Generate Share Link in the bottom of menu from inside Rive after authoring your animation then copy iframe embed code.
2. Embed Webflow: In the element panel of your project in Webflow, you have to click on Embed and then place it where suits best for that part of content on web page.
3. Place the Animation: Add your animation anywhere you want it in Webflow

For more specific guidance, you can always reference our previous post: How to incorporate Rive animations in Webflow pages.

In conclusion

With these few simple steps, you can have excellent Rive animations on your web page and improve the user experience. So why wait? Start using Rive Today & Bring That Wow Factor to Your Animations