Intro To Interactive Animation In Rive | UI Animation Tool

Motion Designers are turning to UI Design and Animation as the demand for interactive experiences on websites and apps rapidly grows. Today we look at a cool new for UI animation called Rive, and talk about how we think Motion Designers can utilize this tool to add some new skills to their repertoire.

In this video you'll learn how to do a quick and simple design in Figma, which makes it easy to get pixel precise with yout work. Then when we explore the design and animation features within Rive, and talk about how they interact with the developers you'll be interfacing with.

🚗 The Path to MoGraph

🎱 Animation Bootcamp

00:00 Intro
00:11 What Is Rive?
00:40 Designing In Figma
02:49 Designing Different States
05:00 Designing In Rive
09:52 Animating In Rive
11:15 Animation Layers
26:03 Lottie vs Rive
29:00 Building The Click Animation
37:57 Outro

[shurt]

Please keep more UI content coming! This is incredibly valuable content. Maybe one day offer a course?

[Basz]

This is so valueable, didnt start Using Rive because I got stuck when animating states. Thanks for this, Im going to dive in to Rive. More Rive content pls!

[ArmandSterbend]

I'm a programmer learning more about UI/UX and stuff like that, and it was super easy to understand, I love it!. Thanks for the video

[nhexplorers]

Best rive tutorial on the Internet. Bravo.

[systematicpsychologic]

This was great, killer walkthrough and now I learned the state machine basics. I also found that having an intermediate 'hover on idle' state was great for enabling rapid pounding of the button that the mouse is hovering over for extended time.

[johanschneider]

Great news! Started learning Rive following this video and saw that they added a graph editor! 👍 Although not as full-featured as AE, it should really help out for situations like bounce... :)

[BigyanGautamphobic]

Please make a part 2 UI interaction animation is so valuable

[caspianievers]

Day one of Rive today and this is the content that is missing from their official documentation. Fingers crossed for some more gems like this for Rive!

[jensen]

Love Rive - great tutorial too, very clear and well explained. More please!

[TheToganivalu]

Exciting world we live in! This tool once is has some more features that we are used to on AE is gonna become a staple in all UI/UX design!

[jeorc]

This is great! Please consider creating more UI animation. Thanks for sharing.

[SimonAbrams]

Fantastic video, @Joey! As another old-timey Flash guy, this is both familiar and new and exciting. As always, super clear content that does a great job at breaking down complex ideas into something digestible.

[manashkashyap]

Please make more content on rive ! This is life changing

[trevclaridge]

This vid is super helpful for developers too (myself); very helpful to know the jargon so you know what your looking for on the backend.

[troychurch]

Great intro to Rive Joey. Well done. Thanks!

[officialloner]

Can’t wait to try this on my next web project

[aahritya_tv]

I'm done. Motion design is next big thing in ui. Fuk yeah!

[aissamotion]

Like before even watching the whole video. thanks for this content joey

[yannberte]

😯 So far from Macromedia Director and Lingo... I'm impressed 🙂

[EkanemStories]

I just started using Rive, so this was very helpful.