Intro To Interactive Animation In Rive | UI Animation Tool
ฝัง
- เผยแพร่เมื่อ 8 มิ.ย. 2024
- 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.
Head over to the Rive site and check it out the magic! rive.app/
🚗 The Path to MoGraph
som.bz/PTMG
🎱 Animation Bootcamp
som.bz/ab
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
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 58 [ซับไทย]](http://i.ytimg.com/vi/TgNEbYSTY0Y/mqdefault.jpg)
Please keep more UI content coming! This is incredibly valuable content. Maybe one day offer a course?
100%
Yes please! There are a lot of courses out there for ui designers learning motion - but nothing for motion designers learning ui
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
Love Rive - great tutorial too, very clear and well explained. More please!
This is great, I really want to see more about interactive UI course with Rive tool.
Your video is amazing. It's easy to understand, well explained, clear and also show some good example to understand the tool.
I can't wait to see more. Awesome Guys!
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!
Once you "get" how the state machine works, it's like a superpower.
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.
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.
What a fantastic way to introduce Rive... Thank you ! Keep it coming.
yes more RIVE pls :)
This is great! Please consider creating more UI animation. Thanks for sharing.
Best rive tutorial on the Internet. Bravo.
Super awesome! would love to see more of this UI motion content. Thanks for sharing.
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.
Like before even watching the whole video. thanks for this content joey
Please keep more tutorials like these. This is very easy to understand. Such a nice explanation. ❤❤
Great intro to Rive Joey. Well done. Thanks!
Hi, here Luis from Brazil.
Really Thanks for the content. I love it! 😍
Best Rive tutorial so far!! can't wait to see more like this! thank you :D
Great walk thru, looking forward to more rive content.
AWESOME! I am want to get into UI motion design and this looks like the right place to start from
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!
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... :)
Amazing as always, Joey!
🙌
@@joeykorenman Please make more rive videos
I want to learn more❤
Please make more content on rive ! This is life changing
hey Joey, this is such a big deal. great video. would definitely like to see more content about Rive.
Awesome tutorial! Thank you Joey!
Can’t wait to try this on my next web project
This explainer video deserves awards.
Really nice video, I needed an intro to Rive and you gave me more than initial tips, thanks! :)
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!
I guess I know what I'm gonna learn next x)
Sounds awesome, I would like to see more videos on this topic.
I want to learn more about it. Many thanks for this. Very inspiring!
I just started using Rive, so this was very helpful.
Thanks for this! Looking forward for more tutorials on Rive!
Thanks for the tutorial, it was awesome! I hope there is more coming!
The best explanation! Thanks
😯 So far from Macromedia Director and Lingo... I'm impressed 🙂
give us moreeeeee! thank you for the tutorial
I'm interested!!
Please do more rive tutorials. It's a great tool.
Awesome tool. Not a motion designer and found it difficult to work out thanks for the great tutorial
Please make a part 2 UI interaction animation is so valuable
On it!
Very useful content. Just trying Rive now
Great video! Thank you🙏🏼
U guys are very clever in making tutorials
Awesome Tutorial, thank you!
Rive is really great, State Machine rocks
Amazing tutorial!
I suppose it's time to learn a new tool. thanks for this awesome explained tutorial
Glad you dug it!
Great tutorial, great technology. Thumbs up.
Great to have a non-Adobe tool like Rive!! It is a great Lottie/AfterEffects option!
Shhhh! Don't jinx it. It's only a matter of time till they buy it too (like they did with Figma)
Awesome tutorial man, really helpful !
Hopefully your upcoming Rive class will focus on UI motion design instead of character animation. There are plenty of tutorials on the latter already. There is a huge gap learning game UI design that incorporates HUD, FUI etc
Ok thanks for this, would love more on this. I hear there's a class for it in the works...baller
Would love to see a course on Rive!
Great Video!
It's best to add both to the stack like you said.
tnx! this is best school ever! )
Great tutorial! Rive might be to After Effects what Figma was to Photoshop.
It looks very cool!
Nice video, pls show more rive!
Thanks Joey!
I'm done. Motion design is next big thing in ui. Fuk yeah!
Definetly more please!
You can also "reverse" an animation after duplicating by going into that runtime menu that has the fps and do "-1x" for backwards at same speed
From France : Thanks, you are really clea and you tutorial is very well build!
It seems to work like Animarte from Adobe ! Extra !
you can import your after effects animation as json into rive, it helps me use after effects to create my animations and add interactions on rive
I’m so glad to have seen this comment. I was wondering if this was possible.
Would you use something like bodymovin to export?
Please School of Motion, full Rive course from beginner to advanced... waiting with my money! 💸😄
Super interested and I loved the pod about this. I’m a guy that works in both motion and the UX/UI world and Lottie is great but a little buggy and limited, but this seems to solve a lot of issues Lottie has. Please show more.
33:18 helpful for interactive mouse (click to drag) movement :)
More Rive please!!!
It's gonna be fun to see Lottie catch up to this. :)
I'm not sure it can "catch up," but I'm sure Lottie will get better and better. The main thing is that Lottie was not really built to be an interactive format, while Rive's format is. It's a really exciting time to be doing this!
@@joeykorenman Oh sure, what a time to be alive, hehe! It's interesting to think where animation & interactivity will be in like 10 years.
Now Rive can import Lottie files
感谢您的分享！
Would love to see more about this tool and other ways it can be implemented. Personally I see lots of cool preloader screens and would like to know how to animate a name or logo and then properly export this and code it into a website!
Keen for more tutorials
Please do more UI motion
Man, awesome tutorial, thanks. As an old school AE user this was brain melting stuff. Really hard to wrap my head around but gotta get with the times I guess.
very nice, thanks keep going rive poor with video learning
Fantastic, papa
If only one of the two (hover or click) works for you but not both at the same time try highlighting your "idle" animation in state machine layer "click" and change it from "Single Timeline" to "Blend 1D".
Love ❤
25:15 I may have an idea, why it is "bugging" when hovering over the button when you had the hovering listener enabled for both layers. You hovered over the letters separately, so every time you would move your mouse from the letters to the rest of the button again, it triggered the "Hover-Off". I may be wrong, but I didn't read another suggestion here :)
You're correct - his workaround was actually the right approach as well: essentially defining a "hit box" for the action. :D
If you really wanted, you could have an invisible rectangle (or any other shape that matches the animated piece) and use that as the 'hit box' (or object that will have the listener attached, in this case). So you wouldn't have to put the listener on any of the actual animated parts. In game programming, that idea is used.
It'd be awesome if you could prevent events from firing on certain layers somehow.
There must be something wrong with me - everything I'm seeing that is presented as new, here and elsewhere, were things that we designers were doing just as easly in Flash, 20 years ago.
You're not wrong! The rendering tech in Rive is lightyears beyond what Flash was capable of, but yeah... fair point. Rive might be the modern successor to Flash.
Flash was good, it was just ahead of its time and with the wrong start (insist being it's own island instead of becoming a standard like svg, js, html canvas, etc.
They just repacked everything...
Flash was insecure. But it was a nice tool and format. Remember doing a navigation bar for a counterstrike clan back in the days...
Its been a while since I used flash, but I dont believe you could create single buttons, that interact direction with your javascript, updating javascript values.
And if I recall, there was a pretty heavy load time with flash, so you wouldn't want to load 2 or 3 different flash objects on a single page, expecially for something as light as a button.
Also, on that note, I think flash only could listen to events within its own canvas, it couldn't watch mouse events outside its canvas.
Gotta commend your music taste. Silent Planet is one of the best to do it. 😁
Heck yeah! Just saw them in Tampa, absolutely crushed it.
Hmmm ... Rive looks interesting. But this example for a button is overly complicated. This is a really simple interaction that can be created in code in minutes or if you're using something like webflow you can create without code in minutes. Maybe buttons are not the best use case for rive? Or at least simple interactions like this?
If you're a web developer, it's much easier to make a button some other way, but if you're an animator this is much more intuitive. This is also a really simple example. If the button did something fancier, it might be harder to code that or set up the animation in Webflow. I see Rive as just opening up interaction design to a wider audience.
@@joeykorenman Yeah I agree. I was diggin aroiund and looking at other more complicated buttons and interactions in general and Rive really offers a ton of opportunity to do some amazing stuff. I've been using lotties a lot, but gonna give Rive a try for sure.
Is there a video tutorial for that little fire at the beginning of the video? Looks really good.😊
You did a great job explaining things. I just wonder, I can create variables in figma and have them interact(default, hover, active, etc.) very quickly. I would use figma to make interactive UI components, and rive for more playful animations? I’m not seeing why I would create interactive buttons in Rive.
I am excited to play around with Rice, and learn more about making interactive animation.
Did you all ever do a series on Rive? New to all this
Thank you for Sharing. We have button animation but how do we make them link out?
Looks great for decorative content, but when you make a button in Rive, what about Accessibility issues ? What about SEO ?
i wanna ask that, is it necessary to recreate your design in rive to animate it ? or we can simply import the artwork and get directly to the animation panel ..
I guess its not a bug when you hover in the center sometimes.
Its because there is another layer on top of it ... text ... so as soon as it enter text, that means it exits the box.
That is my guess, maybe i am wrong.
And your tutorials are great by the way.
How does this work with translations etc? Do you need to build a new button for each language?
If I want my animation to stop while my pointer on the object what should I do ? I did the same animation but on trash icon ...
Is it possible to integrate the Click and Hover animations into a single state machine?
Ring, ring, ring.
Adobe: Hello, Rive?
Rive: Yes. $50bil
"Bug" at 26min: I don't know Rive well enough yet, but in the Flash days we typically created an invisible "hit" object to control buttons, especially if a button's hit-able area animated to keep us from having button flicker--where rollOut caused the button to animate back under our mouse, hence triggering rollOver again... ad nauseum...
But can u actualy create whole interactive UI with such interactive buttons that actualy goes somwhere and do somthing? I tryed XD, Figma and Protopie and non of them can do what i want.
You can't do all of that in Rive, you'd still need to integrate with another platform (like Webflow) or create a full-fledged app with a developer. AFAIK, there isn't yet one "super app" than can do all of that. Back in the day, Flash actually could do everything, oddly enough.
@@joeykorenman yeah back in day i used a lot of flash to create lots of mokups, now its easier with newer sofware, but i wish they all ware put togethet in one big soft. I think ill stay with protopie witch is most advanced i think
@@joeykorenman This is coming. Text is the next big feature. Layout constraints, data binding, scripting, audio are all on the roadmap and all that you would need.
Okey. I make a button click animation on Rive. But what do I do after? How do I hand it over to developers? Also how can I include that in my prototype?
Its not new :) BUT its amazing!