Create animation for web without coding - Rive / Lotties tutorial
Вставка
- Опубліковано 31 лип 2024
- In this video, I'll show you how to use Rive to make a simple but elegant animated button without coding.
Demo: rive.app/s/ZLDNNIz4bEyM47BY8P...
Check out Rive rive.app/
---
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
You've nailed it yet again Minh Pham. Just what I was looking for since I was migrating from Lottie to Rive !
I already loved the lotties, but Rive is incredible! Thanks for this clear and concise tuto !
this is by far, the best most concise tutorial ive found...in all seriousness lol.
I needed this. Straight to the point and covers what is needed right on the go. Thanks.
Thank you for explaining the very concept. I didn't know how this works. I searched on UA-cam but didn't find it. But today is my luck and I found this video. Now I can design animation. Thank you ❤
I really love how amazing your channel and content is, keep it going 🔥
Very nice! I've never heard of Rive before, will definitely try it.
thank you so much. This really helps me getting started with Rive!!
This is absolutely awesome
and boom becomes happies, thanks for the vid Minh
Cảm ơn a vì những tutorial chất lượng
Great video!, I love the way you explain this, thanks for shared!
Great tut! Thanks
wow thanks you for tutorial 🎉
Waiting for the next toturial rive
Great tutorial. Expecting more advanced tutorials on Rive animations if possible. :)
Thank you! will do!
Nice explanation!
thanks bác, rất dễ hiểu và trực quan
WoW! Cool! 😊
Really usefull, thanks!
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.
Scary time for after effects
Adobe should have updated Animate when Flash died. Rive is the only current solution for interactive vector animation.
Amazing thnks for sharing
The bear is so cute
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.
Really cool! Can I use Rive to create an animated video….like save it in mp4?
what camera do you use?
nice..
Please make more of rive tutorials
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.
Nice. How can we integrate this in figma?
Can you playlist for rive tutorial
You have a great channel. I like the webflow videos. Tell me, do you plan to make more webflow videos?
Thank you! I'm currently focusing on introducing new tools + design related tricks in general. But I will try to make more web flow tutorials if there are enough needs.
Thanks for this great tutorial, the question is how do we integrate it to a website
All you have to do is embed it into the website.
can i embed to framer? i already have some crazy ideas
wait, how do i use it for a website then...? can i upload it by myself...?
So how would you incorporate this to a website like WIX?
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?
Heyyy bro! I didn't expect you're watching my videos loll. That's a great point! I'm fairly new to Rive so there's a lot for me to pick up.
Big fan dude. I love your lightning and colour pickings. Keep up the great work dude and just be patient.
Spline and Rive manages states, you can drive this with JavaScript validators so the code will change the states between the design.
@@DinoRossYT Sounds good. Could you share the links please?
is this all made in the free versions
how to export this animation make a mp 4
How to create an app and website
Hi there, please what laptop are you using. It looks pretty cool
Thanks, it's a Macbook Pro 16in 2021 M1 Max
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.
It could function like a regular button, check out their "Get started" button here rive.app/ .
I'm showing what the tool can do, not saying every button needs fancy animation. It's the matter of choice, depends on what you're working on
@@MinhPhamDesign Yes i total agree.. But it would be nice if there was a way to input some kind of code to make it work. Image you can make this kind of nice button with a Function.
What’s up steve
reminds me of flash days - its like we made a whole circle hmm
I thought the same thing when first seeing Rive. Some of the younglings here may be thinking:”what is flash?”
1:11 I think you are the bear
bear is not me at all🤣🤣🤣🤣
His voice does not match my imagination, his profile pic and bold designs made me thing it would be more heavy and had more bass...😂
Hey I love your work. Do you have a telegram or discord link
Really cool! Can I use Rive to create an animated video….like save it in mp4?
After Effects for something like that. Way faster and more appropriate.