Rive: Better collaboration between designers and developers on interactive animations?

#animation #javascript #motiondesign #rive

How do interactive designers work hand in hand with web developers? This seems to be a tough nut to crack since Adobe Flash was discontinued.

Rive promises a new way of enabling collaboration between design and development with their State Machine approach: Designers are able to create states and events for their animation - and developers can trigger these from outside (via JavaScript). 🤝

Here is a good, brief example to trigger a state via JS (react) by Anthony Rimet:

const isHandsUpInput: StateMachineInput | null = useStateMachineInput(
        riveInstance,
        STATE_MACHINE_NAME,
        'hands_up',
    );

// ...

<input
    onFocus={() => (isHandsUpInput!.value = true)}
    onBlur={() => (isHandsUpInput!.value = false)}
/>

Full tutorial: "Rive: Animate Web UIs with State Machines" - Anthony Rimet

In this podcast episode, one of the Rive founders - Guido Rosso - shares their vision: "Is this the new Flash? Rive and the future of interactive design" - School of Motion Podcast

Spotify https://open.spotify.com/episode/64pOVsEV32RAcgHJo4sSIt

"Intro To Interactive Animation In Rive | UI Animation Tool" - School of Motion:

A comparison between Rive and Lottie (by Rive): https://rive.app/blog/rive-as-a-lottie-alternative

Although it has to be said that Lottie is an Open Source animation format whereas Rives file format is proprietary. Only the Rive runtimes are Open Source.

Check out Rive here: https://rive.app/

Let's see how this will play out in 2024. 🪄

Thanks very much to motion designer Olga Vikhrova for sharing the podcast episode about Rive with me - check out Olgas amazing work here: https://www.instagram.com/olga_a_vikhrova/