Hey, June here from the Wix Studio team. Today, I’ll show you how to add Rive animations to your site.
Rive lets you create interactive animations for your sites, bringing designs to life and boosting engagement.
You can create your own animations or choose from designs shared by Rive’s community. Animations can include interactions like entrance, hover, click, loop, or mouse tracking, depending on how they’re set up.
Now, let’s see how you can add them to your site.
The first step is to export the animation we created from Rive. Of course, the same step applies if you’re using one of their community assets.
You’ll find the Rive element in this tab of the Add panel. This is also the Editor’s entry point to the Rive community, in case you want to explore more community assets.
Alright, let’s add the Rive element to the stage.
As you can see, a default animation appears. I’ll replace it with the one I want by clicking ‘Change File,’ uploading it to my site files, and adding it to the stage.
I’ll adjust the element to fit my design. Like any other element, it can be resized and aligned. For this design, I’ll stretch it to fill the entire cell.
Now, let’s tweak the settings to match our design.
You can also preview the Rive animations here—it’ll only preview loop or entrance animations.
If my animation has multiple artboards, I can choose which one to display. In this case, there are two artboards: one with a black background and a centered toggle, and another with lighter colors. I’ll go with the lighter version.
Next is the state machine. Each state combines a set of animations, depending on how it was set up in Rive. There might be just one state or multiple.
Under Fit, choose how the animation fits in the bounding box. We'll stick with 'Cover.'
And we’ll use 'Alignment' to decide how the animation is positioned within it.
I'll align it to the bottom left to focus there.
You can also control whether the animation plays automatically or stays paused on the live site using the autoplay toggle.
Or, determine whether scroll behaviors on touch devices are triggered by scrolling and dragging with the 'Enable Touch Scroll' option.
Finally, you can mark the animation as decorative without adding alt text, or add one if needed.
All set—let’s preview! The animation looks great: the dots follow the mouse, and when you click the toggle, the background color changes. Plus, it looks seamless across all breakpoints.
You can keep learning about different tools and features with more guides and tutorials like this. Check out our Academy.
