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!
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!
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.
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... :)
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
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.
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".
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!
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!
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.
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.
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.
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!
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.
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.
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.
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.
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
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 ;-)
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.
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.
"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...
Why creating the buttons in Figma first? It looks like you could have created them in Riva from getgo. Besides.. if Ffgma is a lot better for prototyping maybe there is (or there should be) a plug-in for in Figma to export to Riva.
Great question! I like to design in a "design" tool, because it forces me to put on my Designer hat and be much more considered about the design. If I'm in an animation app (like Rive or After Effects) then my Animator hat is on and I tend to design more simply, to make my life easier as an animator. You can totally just design stuff in Rive, though.
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 ..
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.
@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.
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.
@@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!
🔥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.
