Intro To Interactive Animation In Rive | UI Animation Tool
Рет қаралды 93,855
Күн бұрын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
@shurt703 Жыл бұрын
Please keep more UI content coming! This is incredibly valuable content. Maybe one day offer a course?
@joeykorenman Жыл бұрын
100%
@Dr.JimmyBrungus Жыл бұрын
Yes please! There are a lot of courses out there for ui designers learning motion - but nothing for motion designers learning ui
@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
@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.
@jensen1050 Жыл бұрын
Love Rive - great tutorial too, very clear and well explained. More please!
@Spaghettiizer Жыл бұрын
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!
@Basz112 Жыл бұрын
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!
@joeykorenman Жыл бұрын
Once you "get" how the state machine works, it's like a superpower.
@systematicpsychologic7321 9 ай бұрын
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.
@jeorc Жыл бұрын
This is great! Please consider creating more UI animation. Thanks for sharing.
@Pinstrap Жыл бұрын
What a fantastic way to introduce Rive... Thank you ! Keep it coming.
@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!
@lydiawere Жыл бұрын
Super awesome! would love to see more of this UI motion content. Thanks for sharing.
@troychurch4055 Жыл бұрын
Great intro to Rive Joey. Well done. Thanks!
@johanschneider4802 Жыл бұрын
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... :)
@morrisonak Жыл бұрын
Great walk thru, looking forward to more rive content.
@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.
@liviere1 10 күн бұрын
Thank you so much! So interested in Rive, please keep doing more of this! 🙌🏼
@alejandralondono7550 9 ай бұрын
Best Rive tutorial so far!! can't wait to see more like this! thank you :D
@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!
@nhexplorers Жыл бұрын
Best rive tutorial on the Internet. Bravo.
@uxmunzir 6 ай бұрын
Please keep more tutorials like these. This is very easy to understand. Such a nice explanation. ❤❤
@manashkashyap7780 Жыл бұрын
Please make more content on rive ! This is life changing
@cheeseandegg Жыл бұрын
hey Joey, this is such a big deal. great video. would definitely like to see more content about Rive.
@saulyance Жыл бұрын
Amazing as always, Joey!
@joeykorenman Жыл бұрын
🙌
@manashkashyap7780 Жыл бұрын
@@joeykorenman Please make more rive videos
@wanplusss Жыл бұрын
I want to learn more❤
@aissamotion6003 Жыл бұрын
Like before even watching the whole video. thanks for this content joey
@hashir Жыл бұрын
Thanks for this! Looking forward for more tutorials on Rive!
@e.s.Doodles Жыл бұрын
I just started using Rive, so this was very helpful.
@gustavomancini5538 Жыл бұрын
Really nice video, I needed an intro to Rive and you gave me more than initial tips, thanks! :)
@katarinacvetkovic8412 Жыл бұрын
Sounds awesome, I would like to see more videos on this topic.
@jessemalisa6804 Ай бұрын
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".
@luishenriquecorrea2754 Жыл бұрын
Hi, here Luis from Brazil. Really Thanks for the content. I love it! 😍
@officialloner88 Жыл бұрын
Can’t wait to try this on my next web project
@freshlesh3019754 Жыл бұрын
Awesome tool. Not a motion designer and found it difficult to work out thanks for the great tutorial
@thegarlaki199 Жыл бұрын
I want to learn more about it. Many thanks for this. Very inspiring!
@fenrisform Жыл бұрын
yes more RIVE pls :)
@coldmind3509 Жыл бұрын
I guess I know what I'm gonna learn next x)
@martalorenzoballesteros8281 Жыл бұрын
Thanks for the tutorial, it was awesome! I hope there is more coming!
@BigyanGautamphobic Жыл бұрын
Please make a part 2 UI interaction animation is so valuable
@joeykorenman Жыл бұрын
On it!
@yannberte8291 Жыл бұрын
😯 So far from Macromedia Director and Lingo... I'm impressed 🙂
@NuanceWebsites 8 ай бұрын
This explainer video deserves awards.
@CamilaLachman 5 ай бұрын
Awesome tutorial! Thank you Joey!
@supposedlysam4936 Жыл бұрын
Would love to see a course on Rive!
@fellowhuman4656 Жыл бұрын
U guys are very clever in making tutorials
@billvids Ай бұрын
AWESOME! I am want to get into UI motion design and this looks like the right place to start from
@andersonaalmeida 5 ай бұрын
Ok thanks for this, would love more on this. I hear there's a class for it in the works...baller
@aescreens Жыл бұрын
Great tutorial! Rive might be to After Effects what Figma was to Photoshop.
@mohydra Жыл бұрын
I suppose it's time to learn a new tool. thanks for this awesome explained tutorial
@joeykorenman Жыл бұрын
Glad you dug it!
@JulianHibbert Жыл бұрын
Great to have a non-Adobe tool like Rive!! It is a great Lottie/AfterEffects option!
@alyx_was_here Жыл бұрын
Shhhh! Don't jinx it. It's only a matter of time till they buy it too (like they did with Figma)
@Chrisonander Жыл бұрын
Amazing tutorial!
@joefrancis6829 Жыл бұрын
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
@emiliowav97 4 ай бұрын
I’m so glad to have seen this comment. I was wondering if this was possible. Would you use something like bodymovin to export?
@jordan2d Жыл бұрын
I'm interested!!
@Crez1994 Жыл бұрын
Great video! Thank you🙏🏼
@steve708822 7 ай бұрын
Very useful content. Just trying Rive now
@erdbeerbus Жыл бұрын
Great tutorial, great technology. Thumbs up.
@dailywiser2112 Жыл бұрын
give us moreeeeee! thank you for the tutorial
@BerylKruger Жыл бұрын
Awesome Tutorial, thank you!
@colbysdovi220 8 ай бұрын
Awesome tutorial man, really helpful !
@ajibademustapha2908 Жыл бұрын
Great Video! It's best to add both to the stack like you said.
@pmimograph3082 11 ай бұрын
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
@DanielSoto101 6 ай бұрын
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.
@JOHAN_PERJUS Жыл бұрын
Definetly more please!
@ilyanemihin6029 Жыл бұрын
The best explanation! Thanks
@OAM1 Жыл бұрын
Rive is really great, State Machine rocks
@Deckard76 Жыл бұрын
Please School of Motion, full Rive course from beginner to advanced... waiting with my money! 💸😄
@gimimedia 4 ай бұрын
Please do more rive tutorials. It's a great tool.
@andresantiagohellmann764 Жыл бұрын
Nice video, pls show more rive!
@dnlbdr8613 Жыл бұрын
From France : Thanks, you are really clea and you tutorial is very well build! It seems to work like Animarte from Adobe ! Extra !
@cp3onmtv963 Жыл бұрын
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!
@fiercecurry 27 күн бұрын
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
@jozef_s Жыл бұрын
Thanks Joey!
@AmodeusR Жыл бұрын
It looks very cool!
@wolfen69 Жыл бұрын
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.
@m1khaild154 2 ай бұрын
tnx! this is best school ever! )
@aahritya_tv Жыл бұрын
I'm done. Motion design is next big thing in ui. Fuk yeah!
@Xandercorp Жыл бұрын
It's gonna be fun to see Lottie catch up to this. :)
@joeykorenman Жыл бұрын
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!
@Xandercorp Жыл бұрын
@@joeykorenman Oh sure, what a time to be alive, hehe! It's interesting to think where animation & interactivity will be in like 10 years.
@amorenew Жыл бұрын
Now Rive can import Lottie files
@JulianHibbert Жыл бұрын
More Rive please!!!
@jourdanhamme3426 Жыл бұрын
33:18 helpful for interactive mouse (click to drag) movement :)
@jogendersaini3072 Жыл бұрын
Please do more UI motion
@jdesigns3394 Жыл бұрын
Keen for more tutorials
@icanmakeeverythingilovedie9861 Жыл бұрын
Gotta commend your music taste. Silent Planet is one of the best to do it. 😁
@joeykorenman Жыл бұрын
Heck yeah! Just saw them in Tampa, absolutely crushed it.
@schroepa1981 Жыл бұрын
Love ❤
@GG-lh6yd 9 ай бұрын
Is there a video tutorial for that little fire at the beginning of the video? Looks really good.😊
@petrusderorkan68 Жыл бұрын
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 :)
@andrewhking 10 ай бұрын
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.
@hossamayman3587 5 ай бұрын
It'd be awesome if you could prevent events from firing on certain layers somehow.
@neiocheney5583 Жыл бұрын
感谢您的分享！
@IvoDaniel Жыл бұрын
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.
@joeykorenman Жыл бұрын
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.
@fltfathin Жыл бұрын
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.
@keithmuzondo3539 Жыл бұрын
They just repacked everything...
@igordasunddas3377 Жыл бұрын
Flash was insecure. But it was a nice tool and format. Remember doing a navigation bar for a counterstrike clan back in the days...
@deidyomega Жыл бұрын
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.
@osamamustafasheikhani8015 Жыл бұрын
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 ..
@dropthedigibomb Жыл бұрын
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?
@joeykorenman Жыл бұрын
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.
@dropthedigibomb Жыл бұрын
@@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.
@stephenaaronosborn 2 ай бұрын
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.
@mTechPenn 3 ай бұрын
Did you all ever do a series on Rive? New to all this
@almuatasembellahalhajmoham8197 Жыл бұрын
very nice, thanks keep going rive poor with video learning
@harambeboy Жыл бұрын
Fantastic, papa
@josselincol Жыл бұрын
Looks great for decorative content, but when you make a button in Rive, what about Accessibility issues ? What about SEO ?
@resekai Жыл бұрын
Ring, ring, ring. Adobe: Hello, Rive? Rive: Yes. $50bil
@christophernelson2261 4 ай бұрын
Thank you for Sharing. We have button animation but how do we make them link out?
@ola.stories Ай бұрын
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.
@marieg7416 Жыл бұрын
I think the bug of the hover event might be because it triggers hover off for the text separatly. You would need to set the event only for the button! Nice video thanks
@marieg7416 Жыл бұрын
aha ok didnt wait enough :)
@heinschultz8970 Жыл бұрын
Yea was also gonna suggest this. Its triggering over all the text pixels and not over the negative spaces between the text. Had similar issues in the past with Flash and action script. Had to either just set the state to look at the button (as suggested) or create an image without an alpha but with the same color value....but that was many moons ago ;-)
@joeykorenman Жыл бұрын
@@heinschultz8970 Interesting! Thanks so much for the insight. It's funny how Flash did most of this stuff 20 years ago.
@GuilhermeBrunowGomes Жыл бұрын
Yup, the issue is that the pointer leave event is being triggered when the pointer leaves each letter on the SVG. I’d say this might be an UX issue but not necessarily a bug.
@nebbsie 7 ай бұрын
How does this work with translations etc? Do you need to build a new button for each language?
@BryceDriesenga 5 ай бұрын
Is it possible to integrate the Click and Hover animations into a single state machine?
@stef3333v Жыл бұрын
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 ...
@AntifreezeAnimation 6 ай бұрын
"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...
@BonnyJohnVarkey Жыл бұрын
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?
超人夫妇
Рет қаралды 20 МЛН
Eniola Taiwo
Рет қаралды 4,5 М.