With the JS runtime, your Rive animation can interact with elements outside of the canvas area.
What can be done with JS runtime:
- Cursor tracking throughout the viewport
- Linkable buttons
- Scroll-based animations
- Animations triggered by interacting with other elements on the page
- Animation that responds to resizing the browser window
How to do it:
Download and host your .riv file - Click the share icon, then "Download," then "For newest runtime." You'll get a .riv file that you'll need to host some where
(they can't be uploaded to directly to Webflow). I've been using UploadCare with great results.
Create a <canvas> - To display the .riv you need to create an html canvas element and give it an ID. You can set the dimensions of the canvas within the tag.
Add the JS Runtime script - Place it in the <head> tag either on the page where your Rive animation will be or in the custom code section of the project settings if you'll have Rive animations on all pages.
Set up the Runtime - Within <script> tags in your embed, use the JS Runtime code to:
- Load your .riv file from the location you hosted it.
- Reference the ID of your <canvas> element
- Call the name of the artboard you set up in Rive
- Call the name of the state machine in your Rive file.
Those steps will get your .riv up and running in your Webflow site. However, it will not have advanced functionality until you add code that tells it what to do. For that, check out the examples section...