A more interactive web using Rive

When I just got started in web development there was this tool called Macromedia Flash. Where most of the internet at the time was static and dull, Flash allowed you to make animations, interactions, even entire games. It messed up the internet in a good interesting way. It spawned silly things like ‘Frog in a blender’ that went around the web as the first memes. But it also resulted in a lot of websites with overly lengthy intro videos. The internet turned into a more creative (as well as a much less accessible) place, for better or worse.

Eventually, people started doing important things on the internet, like banking and buying toilet paper in bulk. This made people more anxious about security and privacy, killing off the security-riddled Flash. And while better security is a great thing, websites went back to being boring.

These days, animations and interactions are making a comeback. New technology allows for better performance while doing animation, both in 2d and 3d. More and more, websites are trying to be more creative again.

This is where Rive comes in. Rive is an easy-to-use tool that allows you to make interactive animations for use on the web, in mobile apps, and even in games.

Giving my website a glow-up

I’ve been tinkering at my own website for a while now. I want my website to look sleek and modern, clean and minimalist. But it wouldn’t be my website if it were just that. To be my website it needs some weird BS. So I started thinking about adding interactions and animations.

There are a million ways to add these things to a website. You can code them by hand using a combination of JavaScript and CSS. You can use a library like GSAP, AnimeJS, or ThreeJS. You can build shaders using GLSL. And, of course, there are animation tools like After Effects you could use.

In giving my website a glow-up, I’m using a combination of all of these. There’s an animation on the homepage that’s built using ThreeJS and GLSL. I’m looking into adding GSAP’s scroll triggers for making items appear in a nice way. And I’ve added a new navigational menu built in Rive.

I chose Rive because it reminded me of Flash. The good bits that Flash had, I mean. It allows you to quickly set up the layout for your animation, it is intuitive, and it has built-in tools for adding interactivity. All of this means you can go from idea to working animation quite fast.

Rive’s good parts

Rive doesn’t necessarily do much that you wouldn’t also be able to do by hand using JavaScript and CSS. But it allows you to work much faster. You can quickly switch between designing and previewing your animation. And adding interactivity is a snap using the built-in State Machines. Rive even has a bones system that allows you to rig a drawing and give it complex animations.

The State Machine in Rive is a node-based system to add interactivity. It allows you to take different animation timelines and determine what it requires to trigger each of the timelines. Using nodes over code gives you a better overview of what is going on. When testing a State Machine it also shows the flow through the system as you test it. A State Machine can even have multiple layers, which can be used to group interactions together. My website’s navigational menu, for instance, uses a layer for opening and closing the menu and a different layer for hovering over a menu item.

I have not used the bones system much yet, but it works in a similar way to the bones systems in other tools (Blender, for instance, has a similar system in 3D). You can make a structure with multiple bones connected to each other and then connect each bone to an element of your design. By moving the bones around, the connected elements are animated accordingly. This is great for character animation, but can be used to animate pretty much anything.

Another great feature is the ability to add constraints to elements. Constraints allow you to animate objects based on the movement of other objects, connect properties of one object to another, and set limits on how objects can move. This is a great way to get more control over an animation.

Rive’s missing bits

I haven’t really run into any major bugs or issues so far, but there are some ways I think Rive could improve.

First is the ability to change the mouse cursor icons. Rive is, of course, made for more than just web interactions. However, for the specific use-case of a website it would be really useful to change the mouse cursor’s icon from within Rive. If I would want to do that now, it would require triggering events for this and using JavaScript to handle the changed icon.

The next one is one that I specifically ran into when making the menu, so it is very niche. Rive’s animation has a fixed-size. Which, for my menu, means that there is a fixed-sized canvas hovering over my website capturing mouse events. If a button happens to fall underneath that canvas, the button can’t be pressed. This would be solved completely if an artboard in Rive could be set to have a dynamic height or width based on its content. Again, there’s a workaround for this by triggering events and using JavaScript to clip the canvas accordingly.

Conclusion

As I’m moving through my website and making everything look nicer, I’m definitely going to be making more use of Rive. It’s quick, easy-to-use, and has enough horsepower to get some really cool interactions working. That said, there will always be places where Rive falls short or where a different tool would make more sense. No tool can, or should, do everything, but the things Rive does, it does well.