Create animation for web without coding - Rive / Lotties tutorial

In this video, I'll show you how to use Rive to make a simple but elegant animated button without coding.
---
0:00 Intro
1:31 Overview
2:45 Import SVG
4:13 Clipping mask
5:07 Animation states
8:37 Set up interaction logic with State Machine
13:42 Loop animation
15:45 Export

[appelenian]

this is by far, the best most concise tutorial ive found...in all seriousness lol.

[videotestmb]

I already loved the lotties, but Rive is incredible! Thanks for this clear and concise tuto !

[ronaldnettey]

I needed this. Straight to the point and covers what is needed right on the go. Thanks.

[vijaypwr]

Thank you for explaining the very concept. I didn't know how this works. I searched on YouTube but didn't find it. But today is my luck and I found this video. Now I can design animation. Thank you ❤

[thebinarykid]

You've nailed it yet again Minh Pham. Just what I was looking for since I was migrating from Lottie to Rive !

[zohaibmalik]

Great tutorial. Expecting more advanced tutorials on Rive animations if possible. :)

[hamptonpete]

Very nice! I've never heard of Rive before, will definitely try it.

[rivella]

Although in a real world situation you wouldn't set the subscribed state directly in the animation but only after your surrounding app has successfully performed the subscribed request against the backend. If that's the case the Click Trigger input would have to be set from outside to true which then shows the Click state.

[xMOSQiCEx]

thank you so much. This really helps me getting started with Rive!!

[me-cmor]

I really love how amazing your channel and content is, keep it going 🔥

[leon.d]

and boom becomes happies, thanks for the vid Minh

[michaelmccall]

Thanks for this great tutorial, the question is how do we integrate it to a website

[shableep]

This is great. But I wish there was a way to set custom easing on the 200ms transition between the hover on and off. I also wish there was a way to trigger each timeline to play as it's being transitioned to.

[leolr]

Great video!, I love the way you explain this, thanks for shared!

[_asturias]

wow thanks you for tutorial 🎉
Waiting for the next toturial rive

[codybythrow]

Keep in mind, Rive does require some code if your platform doesn't support it natively. This is great for the building side, but most people will run into a wall when they realize you can't simply click a button and have it work on your website.

[kwakucool]

Hi there, please what laptop are you using. It looks pretty cool

[sircasino]

How do you go back and edit which object that is being hovered on? I think choosing the wrong one is what's giving me weird results.

Great video as always man, congrats. The one thing I can't find in the rive or spline documentations is the feedback. It's great that we can create all these nice animations but how do you retrieve data from the player to do what its supposed to do, in this case for example to run a command which validates the email for example and give an error to the player or if everything is fine, run a command what put the user's email address to a db?

[fatjay]

The big problem ist .. its a cool button .. but what can you do with it? only link something it would be much better if you can add mailchip to it so it would have the function.