Web animation with Rive: our experience

The motion design field has no shortage of excellent tools, and nowadays it's relatively easy to create spectacular visual effects and animations. Much of that technological leap has been driven by the film industry and the needs of those producing the latest blockbusters or TV series.

Bringing creative motion design into web projects, however, isn't as straightforward as doing it for video production.

When you think about motion design for the web, you have a few options:

• Use video
• Build fully native, hand-coded animations (e.g., framer-motion, threejs)
• Use solutions like Lottie, Rive, or Spline

In this article we're going to talk about Rive: why it's revolutionizing how motion design is done on the web, when it's worth using, and how it performs compared to Lottie.

I used Lottie for many years, but one day I got stuck on performance issues with a specific animation. No matter how hard I tried to optimize it within Lottie's framework, there was no way around it. That day, after a bit of research, I discovered Rive. I redid the animation in Rive and was stunned to see that all the performance issues had disappeared: no stutters, no lag, even on a low-powered machine.

What is Rive?

Rive is a modern tool for creating high-performance interactive animations that work on any platform. It's easy to use, works great with vector graphics, offers a solid developer kit, and has very powerful features like the state machine and mesh deformation. It's a fairly new tool (at the time the original article was published, in November 2022, the available version was 0.8.9). Even so, even at that stage, Rive outperforms some of its competitors and has the potential to soon become the industry standard for 2D animation.

What's great about Rive?

Rive is great. Here are my favorite features:

Performance

For me, the big advantage is performance (in the realm of web animations). It's achieved thanks to a better-designed architecture and Rive's WASM runtime library, which handles all the calculations.

Size

Animations are also much lighter than Lottie files. Most of the time, if you're only using 2D objects, they take up just a couple of KB.

State machine

Rive makes animations interactive: you can control the animation's state from your code, loop parts of it, or define the transition from one state to another. This isn't possible with Lottie. It lets you build complex animations that react to mouse movement, clicks, or motion, or that change state based on an input value.

Works on any platform

Rive animations export easily and can run on any platform: iOS, macOS, Android, Windows, and the web.

Mesh deformation

This is a way of applying natural deformations to an object by joining several points into a mesh and then manipulating them in a chained fashion.

This isn't everything Rive can do; on its website you'll find a better showcase of everything that works flawlessly today.

What does my workflow with Rive look like?

Even though Rive promotes its Editor as the main tool for creating animations, I still find it less productive than Adobe After Effects. That's why I first prototype and design animations in AE, and in the final stages, once everything is approved, I export them to Rive. The export is fairly straightforward and can be done with AE's bodymovin plugin. Afterward you'll need to fix a few errors and make some adjustments, but it's worth it, given how much less time I spend on the initial phase. That said, I do the simplest animations directly in Rive.

What are its limitations?

Rive is growing at full speed and its team ships new features very fast, so everything below was accurate as of the original publication date.

Blur, glow, and shadows

If you're prototyping an animation with a lot of light effects, you might struggle to pull it off in Rive. There's no native support for effects like blur, glow, or shadows. When used sparingly and under certain conditions, you can sometimes work around this by adding rasterized light or blur images to achieve a similar effect. But if they're used heavily, you're better off considering Lottie or building the animation natively with framer-motion or threejs. From what I understand, the Rive team has some ideas to fix this, so we might see it soon.

Dashed lines

Another feature that shows up often in app mockups or diagrams and that, for now, isn't available in Rive.

Element alignment

You can't align elements to center, left, or right.

Moving an object along a Bézier curve

For example, if you need a cart to travel along a winding road, or a roller coaster that also has to brake and accelerate according to the laws of physics, it can get tricky in Rive. You'll have to manually add a lot of keyframes to reproduce that path and define the transition functions between them. Fortunately, you can do this in AE, export it to Rive, and polish it until it's perfect. It's a highly requested feature that comes up fairly often.

In After Effects, all you need is two points and a curve for the object to move between them.

In Rive, to achieve a similar effect, you need to create more points. The more keyframes we create, the smoother the movement will be.

Mask over a stroke

Right now you can only use fill masks, but sometimes it's useful to apply a mask over a stroke. And speaking of masks, it's worth adding that they can't be inverted or subtracted.

Excluding files from export

I often export layers as PNGs from a design tool to compare a keyframe of the animation made in Rive against the reference. But once you add it to the artboard, you have to remember to delete that layer before exporting; otherwise, the .riv file size will balloon.

Separation between the Animation and Design tabs

I often run into cases where I need to resize an object without animating it, but the object is only visible at a specific point in the animation. So you have to move the timeline to that point and change the size there, but that creates a new keyframe; you have to delete it in Animation, switch to the Design tab, and paste the copied size for the element there. When you have to make these changes on a curve with a lot of points, it gets pretty annoying.

Canvas resizing

You can't resize the canvas simply by dragging the edge while keeping all objects in place, nor can you extend the canvas from a specific side.

Native app

Having a web app in the browser is nice, but it would be great to have a native version for the operating system.

Slow zoom

The editor's zoom is very slow, so you have to scroll the mouse wheel a lot to zoom in.

Conclusion

Rive is an incredible, promising tool that can already handle a ton of motion design tasks. However, it does have certain limitations, and knowing them will help you decide whether to go with Rive or try alternatives.

• If the animation has a lot of light effects, blurs, shadows, or dashed lines, you might be better off using Lottie or going with a native implementation.
• If you have a lot of moving objects on the page, be careful. Performance is excellent, but it still has its limits.
• If you need elements with physical properties, that accelerate and decelerate correctly based on their weight, AE will be the better choice for building them, with the option to export them to Rive if needed.

For everything else, Rive works beautifully: you can use it to build interactive web components, animate 2D characters, or animate mockups.