Rive

I’ve had the animation tool Rive on my list of bookmarks to check out for a while. I recently got around to making an account and giving it a shot. I was immediately interested in what the final output/export is. Because, of course, I want to know how I can use it… to connect it […]

I’ve had the animation tool Rive on my list of bookmarks to check out for a while. I recently got around to making an account and giving it a shot.

I was immediately interested in what the final output/export is. Because, of course, I want to know how I can use it… to connect it to my own web work. I’m not sure what I expected. Maybe SVG output with a bunch of inline JavaScript to control it? It’s not that, though. Ultimately you get a .riv file.

Then you use one of their runtime libraries to ultimately display the animation. I opened one of their demos, exported the animation, and here I am using the JavaScript runtime and CodePen Asset Hosting to display the animation:

CodePen Embed Fallback

They have loads of interesting use cases and demos on their website. For the web, it ultimately ends up as a . I don’t know much about canvas and accessibility, but I imagine you’re kind on your own there to do the best you can do.

Anywho — just a 10-second glance here. The big takeaway here is that their Get Started button is the GOAT:

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow