Intro To Interactive Animation In Rive | UI Animation Tool

[@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

[@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.

[@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.

[@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!

[@jensen1050]

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

[@luishenriquecorrea2754]

Hi, here Luis from Brazil. Really Thanks for the content. I love it! 😍

[@aissamotion6003]

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

[@systematicpsychologic7321]

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.

[@morrisonak]

Great walk thru, looking forward to more rive content.

[@lydiawere]

Super awesome! would love to see more of this UI motion content. 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.

[@troychurch4055]

Great intro to Rive Joey. Well done. Thanks!

[@cheeseandegg]

hey Joey, this is such a big deal. great video. would definitely like to see more content about Rive.

[@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.

[@fullcircleperpetuals]

This explainer video deserves awards.

[@liviere1]

Thank you so much! So interested in Rive, please keep doing more of this! 🙌🏼

[@uxmunzir]

Please keep more tutorials like these. This is very easy to understand. Such a nice explanation. ❤❤

[@Pinstrap]

What a fantastic way to introduce Rive... Thank you ! Keep it coming.

[@DadOfExile]

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... :)

[@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!

[@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.

[@manashkashyap7780]

Please make more content on rive ! This is life changing

[@alejandralondono7550]

Best Rive tutorial so far!! can't wait to see more like this! thank you :D

[@officialloner88]

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

[@mohydra]

I suppose it's time to learn a new tool. thanks for this awesome explained tutorial

[@joeykorenman]

Glad you dug it!

[@BigyanGautamphobic]

Please make a part 2 UI interaction animation is so valuable

[@joeykorenman]

On it!

[@fenrisform]

yes more RIVE pls :)

[@EkanemStories]

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

[@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)

[@yannberte8291]

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

[@katarinacvetkovic8412]

Sounds awesome, I would like to see more videos on this topic.

[@thegarlaki199]

I want to learn more about it. Many thanks for this. Very inspiring!

[@aahritya_tv]

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

[@billvids]

AWESOME! I am want to get into UI motion design and this looks like the right place to start from

[@gustavomancini5538]

Really nice video, I needed an intro to Rive and you gave me more than initial tips, thanks! :)

[@andersonaalmeida]

Ok thanks for this, would love more on this. I hear there's a class for it in the works...baller

[@saulyance]

Amazing as always, Joey!

[@joeykorenman]

🙌

[@manashkashyap7780]

@@joeykorenman Please make more rive videos

[@wanplusss]

I want to learn more❤

[@aescreens]

Great tutorial! Rive might be to After Effects what Figma was to Photoshop.

[@fellowhuman4656]

U guys are very clever in making tutorials

[@hashir]

Thanks for this! Looking forward for more tutorials on Rive!

[@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]

I’m so glad to have seen this comment. I was wondering if this was possible. Would you use something like bodymovin to export?

[@supposedlysam4936]

Would love to see a course on Rive!

[@dailywiser2112]

give us moreeeeee! thank you for the tutorial

[@coldmind3509]

I guess I know what I'm gonna learn next x)

[@colbysdovi220]

Awesome tutorial man, really helpful !

[@pmimograph3082]

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

[@erdbeerbus]

Great tutorial, great technology. Thumbs up.

[@martalorenzoballesteros8281]

Thanks for the tutorial, it was awesome! I hope there is more coming!

[@JOHAN_PERJUS]

Definetly more please!

[@andresantiagohellmann764]

Nice video, pls show more rive!

[@DanielSoto101]

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.

[@Chrisonander]

Amazing tutorial!

[@freshlesh3019754]

Awesome tool. Not a motion designer and found it difficult to work out thanks for the great tutorial

[@CamilaLachman]

Awesome tutorial! Thank you Joey!

[@jordan2d]

I'm interested!!

[@steve708822]

Very useful content. Just trying Rive now

[@dnlbdr8613]

From France : Thanks, you are really clea and you tutorial is very well build! It seems to work like Animarte from Adobe ! Extra !

[@Crez1994]

Great video! Thank you🙏🏼

[@mogrts]

Please do more rive tutorials. It's a great tool.

[@OAM1]

Rive is really great, State Machine rocks

[@ajibademustapha2908]

Great Video! It's best to add both to the stack like you said.

[@ilyanemihin6029]

The best explanation! Thanks

[@m1khaild154]

tnx! this is best school ever! )

[@GG-lh6yd]

Is there a video tutorial for that little fire at the beginning of the video? Looks really good.😊

[@jdesigns3394]

Keen for more tutorials

[@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!

[@stephenaaronosborn]

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.

[@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

[@resekai]

Ring, ring, ring. Adobe: Hello, Rive? Rive: Yes. $50bil

[@Deckard76]

Please School of Motion, full Rive course from beginner to advanced... waiting with my money! 💸😄

[@mTechPenn]

Did you all ever do a series on Rive? New to all this

[@AmodeusR]

It looks very cool!

[@christophernelson2261]

Thank you for Sharing. We have button animation but how do we make them link out?

[@BerylKruger]

Awesome Tutorial, thank you!

[@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".

[@fiercecurry]

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

[@jourdanhamme3426]

33:18 helpful for interactive mouse (click to drag) movement :)

[@petrusderorkan]

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]

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]

It'd be awesome if you could prevent events from firing on certain layers somehow.

[@JulianHibbert]

More Rive please!!!

[@jozef_s]

Thanks Joey!

[@infonima]

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.

[@RandallMartinPL]

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.

[@joeykorenman]

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.

[@RandallMartinPL]

@@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

[@guidorosso]

@@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.

[@AntifreezeAnimation]

🔥12/2023: Importing from Figma>> Grab the whole button stack, right-click in Figma and save as SVG. Paste into Rive (it will show up in your Assets tab and won't immediately appear on screen) Note that this creates vectors for your text, so if you want to take advantage of Rive's (now available) text tool, you'll want to replace your text in Rive.

[@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.

[@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 ..

[@vagab14]

@joeykorenman341 25:25 I don't think its a Rive bug... actually javascript considers you have exited the background when the mouse hovers over "SEND IT" text/svg. Hence the hover-off state is triggered! I have experienced the same issue while working on svgs in JS.

[@joeykorenman]

Interesting... I assumed because I was listening on the group (the button BG + the type) it would consider both of those layers, but maybe it's just the nature of JS.

[@vagab14]

@@joeykorenman I thought so too, but this thing keep on randomly popping up from time to time while working with svgs, hopefully one day i would find the time to sit with my dev team and figure it out! Amazing content by the way, your team and the Futur are definitely shaping the design community around the world!

[@schroepa1981]

Love ❤

[@josselincol]

Looks great for decorative content, but when you make a button in Rive, what about Accessibility issues ? What about SEO ?

[@jogendersaini3072]

Please do more UI motion

[@neiocheney5583]

感谢您的分享！

[@nebbsie]

How does this work with translations etc? Do you need to build a new button for each language?

[@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.

[@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.

[@harambeboy]

Fantastic, papa

[@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 ...

[@rocketsunny2423]

everytinme I add the idle to the second state the hover stops working, it shows if running the first state, but theres no animation

[@jz1244]

i have the same problem

[@jz1244]

did anyone get it to wok?

[@BryceDriesenga]

Is it possible to integrate the Click and Hover animations into a single state machine?

[@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?