Poetry in motion.

Hi, I’m Joe, a Motion Designer at Together. Basically, if we did it and it moves, I’m probably the guy that’s done it.

We’re doing more and more of it these days, and so is everyone else it seems. Click on any website, walk past any city centre billboard, browse any company’s social media posts — motion is here … there … and everywhere.

And for good reason. Motion is an incredible tool, with the power to engage, educate and entertain — tacky hook, I know, but let’s not overthink it. (We’ll come back to the three E’s later, don’t worry.)

Since I first started, the field has been slowly changing. (You could even say it’s been … in motion.) It’s no longer solely about straightforward, linear animations or videos played from A to B. Motion has been quietly absorbing elements of UX/UI design, and sneaking into the domain of web development. These days, even humble utilitarian buttons are being sprinkled with the magic dust to give them more character.

Well, where am I going with this?

 

Why I hate love designers and developers.

As a motion professional, every day you walk a tightrope.

On one hand you’ve got pretentious, know-it-all, flat-white-drinking designers who look for the aesthetic or narrative of an animation piece, but often come up with storyboards that are too complex for developers.

On the other hand you’ve got four-eyed, basement-dwelling developers, obsessed with small file sizes that integrate easily and don’t ruin those blisteringly fast pagespeed scores they’re so proud of.

How do you reconcile the two?

What it really comes down to is which format you choose for your animations.

 

From Sillypun.mp4 to Dadjoke.json.

It all started with MP4, the good old fashioned Swiss Army knife of the video format world. Used extensively for some time now, it’s a video format that is heavily supported by almost all players and browsers.

MP4 has never really let us down, assuming you know its limitations. And speaking of limitations, first there’s the file size … Oh, the file size …

The other big one is that MP4s don’t support transparent backgrounds or exact hex codes.

Trying to create sites with flat coloured backgrounds is a nightmare because you’ll never be able to match the colours. (Trust me, I’ve tried — thousands of times.)

Another issue is that MP4’s aren’t vector-based and therefore aren’t scalable. An MP4 has an exact size and frame rate, so if you zoom in or resize, it will look blurry or pixelated. And in these modern times, where larger screens and exponentially larger resolutions are becoming the norm, the resulting file will weigh more than Andre the Giant’s thigh.

Gotta whole Lottie love.

That’s where Lotties come in. Also known as .json files, they’re an open-source file format that’s been all the rage for the past couple of years, with designers and developers clambering over them in equal measure.

The biggest advantage of Lotties over MP4s is that they’re both vector-based and scalable. Zoom in as much as you like, and the edges of lines will still be crystal clear.

But there are downsides. Lotties can become really bloated and really trip up the browser. You’ve got to be frugal, otherwise they will render your page a choppy, jittery and ugly mess.

Both Lotties and MP4s (and other video formats like .mov, and webm, for example) are linear: there is a start and then an end, and that’s it. You can make them loop in code but ultimately it’s just the same video playing again and again.

What if you need something more?

Rive? What’s that then?

Around 2022, we started hearing whispers of a magical tool that would solve all these problems.

This tool was Rive.

Initially I was reluctant to try it, After Effects had everything, so why change? It could kick out 99% of the file formats required, and Rive was going to be another fad, lost to time like dubstep and prawn cocktails. But when I finally took the plunge, I realised how much of a stubborn primadonna I was being.

The rumours were mostly true. Rive really seemed to solve all our problems and provide a path forward. And mastering it turned out to be pretty easy.

The big thing about Rive is that unlike MP4s or Lotties, it’s not a file type. It’s more like an interactive game engine. An isolated mini-product or even an application within a site.

Instead of having one linear timeline, motion designers can use Rive to create multiple timelines and artboards which they can then connect in various ways. These are controlled via conditions you specify, giving you ultimate control of what’s going on and when.

Want an object to follow the mouse? Go for it! Want a click on something to trigger another timeline? Ye, let’s do it! Add a hover animation to a button? Be my guest!

Everybody will love you. The designers because it’s vector-based and therefore crispier than Gary Lineker. The developers because the resulting file is smaller than a mouse’s handkerchief.

All this, plus it runs incredibly smoothly, in real-time — even with the final boss, Safari.

 

Thrive with Rive.

Rive is really where it all meets: UI/UX, motion graphics and web development. But to thrive with it, you must master a few things. As a motion designer you need to have a grasp on these other disciplines, and know how to best draw upon different elements of each craft.

You also need to be familiar with how UI/UX can influence the user and their decision making. It’s important to know how to guide the user to specific areas, in order for them to engage with the interactivity.

It’s also down to the motion designer how best to balance the demands of the development team with the creative vision of the design team.

And most importantly, there’s the motion design. It’s animation after all. It’s never too late to brush up on your motion principles. Easing has never been sexier.

Rive! What is it good for?

With these advancements, Rive provides a lot of opportunities.

Let’s say, for example, that you’re creating a marketing website for a B2B product, and you want to show off some of its features to prospective buyers. The classic solution would be a linear product-shot video, but with Rive, you can build an interactive miniature version of the entire process right inside your animation asset.

Just as a tram network runs on a set of predetermined routes, a Rive animation can provide the tracks for the user to follow, simulating where and when to click on buttons, add to basket, etc., etc.

This gives the user more agency and a tangible, hands-on experience.

Yeah, but what about illustrations?

Illustrations are another area where motion designers can really get creative with Rive.

A standout example for me would be illustrations that react to mouse movement, giving a sense of parallax. This is especially great with landscapes, putting the user “inside” the art.

Rive also has some great tools to rig up characters and create meshes out of images, so don’t worry about having to spend the best part of your career fiddling with anchor points.

What’s the catch?

Rive is a great addition to any animator’s toolset. It gives more creativity to designers, animators and developers — plus it offers interesting new ways to collaborate.
I truly believe it’s going to make some big waves in the web-based graphics space and it has the Official Joe Seal of Approval.

However! It’s not all sunshine, lollipops and rainbows. There are some important things to consider.

First of all, there’s resources. Adding complex hover states, buttons and various timelines, will take a lot of time, even for dashingly handsome and talented motion designers.

Secondly, due to the sheer amount of keyframes, motion design can be clunky and cumbersome to alter. All the more important to do the upfront thinking, be intentional and really reflect on the implementation of Rive early on, saving dashingly handsome and talented animators everywhere many headaches later on.

This is even more evident with the more complex projects that have multiple layers that spread out like a spider web. It shouldn’t be tacked on at the last minute to tick off “interactivity” on some arbitrary checklist.

Finally, before I start sounding like Rive’s best UK salesman, I’ll go on record saying that Rive isn’t 100%, royal-flush perfect, at least not yet.

There are also some glaring feature omissions such as the elusive, yet essential dashed stroke. (Don’t get me started.)

 

The Return of the Three E’s.

It’s very easy to get over excited with this great new technology and start filling websites up with Rive animations. But given the issues we mentioned above, a good way to find balance is to go back to our cringey 3 E’s:

Engage: Does the overall design benefit from all this interactivity? Does it engage users, help bring their potentially fading interest back into focus, or help them transition between different subjects?

Educate: Does motion help explain something which might be too complex to fully grasp if static? Will users come away from this animation with more understanding than if they hadn’t even seen it all?

Entertain: Sometimes, especially with the more dry subject matter, there is a benefit in art for art’s sake. So ask yourself, would motion give the user a more personal experience?

So. What are you waiting for?

Curious? Why not download the Rive editor, and give it a spin?

And as for you, Rive. Give us our dashed stroke — we’re counting on you!