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.

[@nhexplorers]

Best rive tutorial on the Internet. Bravo.

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

[@jensen1050]

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

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

[@NuanceWebsites]

This explainer video deserves awards.

[@troychurch4055]

Great intro to Rive Joey. Well done. Thanks!

[@luishenriquecorrea2754]

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

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

[@jeorc]

This is great! Please consider creating more UI animation. Thanks for sharing.

[@morrisonak]

Great walk thru, looking forward to more rive content.

[@fenrisform]

yes more RIVE pls :)

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

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

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

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

[@aissamotion6003]

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

[@manashkashyap7780]

Please make more content on rive ! This is life changing

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

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

[@cheeseandegg]

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

[@aahritya_tv]

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

[@lydiawere]

Super awesome! would love to see more of this UI motion content. Thanks for sharing.

[@EkanemStories]

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

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

[@liviere1]

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

[@aescreens]

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

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

[@coldmind3509]

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

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

[@thegarlaki199]

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

[@katarinacvetkovic8412]

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

[@fellowhuman4656]

U guys are very clever in making tutorials

[@saulyance]

Amazing as always, Joey!

[@joeykorenman]

🙌

[@manashkashyap7780]

@@joeykorenman Please make more rive videos

[@wanplusss]

I want to learn more❤

[@billvids]

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

[@dailywiser2112]

give us moreeeeee! thank you for the tutorial

[@ilyanemihin6029]

The best explanation! Thanks

[@Chrisonander]

Amazing tutorial!

[@OAM1]

Rive is really great, State Machine rocks

[@alejandralondono7550]

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

[@hashir]

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

[@andersonaalmeida]

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

[@CamilaLachman]

Awesome tutorial! Thank you Joey!

[@JOHAN_PERJUS]

Definetly more please!

[@Crez1994]

Great video! Thank you🙏🏼

[@erdbeerbus]

Great tutorial, great technology. Thumbs up.

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

[@supposedlysam4936]

Would love to see a course on Rive!

[@colbysdovi220]

Awesome tutorial man, really helpful !

[@steve708822]

Very useful content. Just trying Rive now

[@jordan2d]

I'm interested!!

[@gustavomancini5538]

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

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

[@freshlesh3019754]

Awesome tool. Not a motion designer and found it difficult to work out thanks for the great 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]

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

[@andresantiagohellmann764]

Nice video, pls show more rive!

[@m1khaild154]

tnx! this is best school ever! )

[@ajibademustapha2908]

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

[@martalorenzoballesteros8281]

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

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

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

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

[@BerylKruger]

Awesome Tutorial, thank you!

[@mogrts]

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

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

[@resekai]

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

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

[@jozef_s]

Thanks Joey!

[@GG-lh6yd]

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

[@Deckard76]

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

[@jdesigns3394]

Keen for more tutorials

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

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.

[@jourdanhamme3426]

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

[@JulianHibbert]

More Rive please!!!

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

[@AmodeusR]

It looks very cool!

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

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

[@mTechPenn]

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

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

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

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

[@schroepa1981]

Love ❤

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

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

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

[@josselincol]

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

[@christophernelson2261]

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

[@neiocheney5583]

感谢您的分享！

[@jogendersaini3072]

Please do more UI motion

[@almuatasembellahalhajmoham8197]

very nice, thanks keep going rive poor with video learning

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

[@harambeboy]

Fantastic, papa

[@MsCrno]

Export SVG of frame or button and import that svg to Rive. Rive will read all layers properly. No need to design in rive from scratch.

[@AntifreezeAnimation]

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