(last 10 minutes) did my brain just now comprehend what I am watching here? : D You just brought programming (php/js/css/html amateur here) into a visual state machine. So all this time, being one of the rare designers who can also program (you know the pain of design team working with programming team, while trying to meet the demands of the overpromising sales team?) just now got its tool to do it all, both visually & logically, but visually without code. So RIVE is the visual tool for designers to do programming without programming. My head hurts now LOL
(first 5 minutes) This is encouraging, a free crash course for us trying to get through RIVE learning curve. (coming from rigging animation software, tyring to wrap mind around state machines)
Great tutorial Joey, really helps with wrapping your head around the state machine! Regarding the constraints: I believe in this case using the translation constraint would make the Rive file a bit leaner, because it only uses the position data. The transform constraint also uses scale and rotation, which isn't needed for the spinner.
thanks! this explained a lot more on the use of multiple layers and constraints. Most tutorials cover this as it relates to character rigging not motion design.
This is great! You did a great job teaching the concepts of state machines and how they are related to animation timelines, constraint strengths, inputs, and listeners. I learned a lot. At 31:30 you talk about saving space by omitting a fill value. I think the size saved is probably negligible unless it was specified on many keyframes.
It didn't take too long! If I was building this without recording a tutorial about it, I would have skipped some intermediate steps and it wouldn't have taken as much time, too.
very interesting, thank you! The whole blending between states magic is clear and very impressing, but Constraints are not so clear, this part was the most challenging to understand. Was there a way to make this animation (or similar but slightly less complex animation) without Constraints? Can you make a separate video explaining how they work (and why :) )?
Constraints were definitely the cleanest way to make this, I think. You could simply blend between timelines to get a similar effect, but it would be harder to control how the animations transition into one another.
@@joeykorenman I wondered this as well at first - out of curiosity I just tried a blending timelines method but it struggles with blending in and out of the rotation animation in a nice way. Using constraints is cleaner and smarter, yep!
It depends... if you work on live broadcast graphics you can control and use Rive files directly in Unreal, so that's one way. It can (though this is still new) replace VizRT and other high-end systems like that. You wouldn't IMO use Rive to replace traditional motion design work you're doing in After Effects, though.
@@joeykorenman Wow, I didn't expect this answer. It blows my mind. And yes, we do have some live shows. I didn't think it could be integrated with Unreal, this is on another level! Where can I learn specifically about this?
@@fernandovillalaz3838 There are some YT videos out there, but it's not widely used yet AFAIK. The Rive team would definitely talk to you about the possibilities though, if you want to know more. Shoot me an email if you want an intro. joey at schoolofmotion dot com.
@@fernandovillalaz3838nowhere! There is no courses or TH-cam tutorials for this specific workflow. It’s a brand new workflow. There is a Rive plug-in for UE that brings in your rive project.
Great tutorial althought it`s super counter-intuitive to use Rive... If I wouldnt follow this tutorial it would be IMPOSSIBLE to come up with this by myself.
i come from Cavalry and Spline... so i'm kinda disappointed seeing how messy the UIUX workflow on Rive here. its all over the place to create such simple thing.
Clickbait much? :)) You can make this with AE and export it to Lottie and then program the frame sequence segments per interaction. That being said, you prolly shouldn't since Rive is mostly free. :)
You definitely can’t make this interaction with Lottie without a lot of extra code. The way the two animations blend smoothly no matter when the user interacts isn’t something Lottie files support.
Love the recent focus on Rive content. Keep it going!
Totally agree 👍
i am so glad clients are not asking me to make little spinners in after effects yet
YET :)
(last 10 minutes)
did my brain just now comprehend what I am watching here? : D You just brought programming (php/js/css/html amateur here) into a visual state machine. So all this time, being one of the rare designers who can also program (you know the pain of design team working with programming team, while trying to meet the demands of the overpromising sales team?) just now got its tool to do it all, both visually & logically, but visually without code. So RIVE is the visual tool for designers to do programming without programming. My head hurts now LOL
(first 5 minutes)
This is encouraging, a free crash course for us trying to get through RIVE learning curve. (coming from rigging animation software, tyring to wrap mind around state machines)
Great tutorial Joey, really helps with wrapping your head around the state machine! Regarding the constraints: I believe in this case using the translation constraint would make the Rive file a bit leaner, because it only uses the position data. The transform constraint also uses scale and rotation, which isn't needed for the spinner.
Ooooh, nice. Didn't know that. Thanks for the tip!
The moment at roughly 40 mins when you press play and it transitions smoothly into the oscillation feels magical.
thanks! this explained a lot more on the use of multiple layers and constraints. Most tutorials cover this as it relates to character rigging not motion design.
This is great! You did a great job teaching the concepts of state machines and how they are related to animation timelines, constraint strengths, inputs, and listeners. I learned a lot. At 31:30 you talk about saving space by omitting a fill value. I think the size saved is probably negligible unless it was specified on many keyframes.
Real good explanation. Nice level and duration.
Let's keep with more Rive and Spline content!!
Great tutorial, very well explained and gave me a good idea of the capabilities and the workflow of Rive. Thanks!
This was great. Easy to follow even at 1.75 playback speed. I'm going to check out training budget to consider the paid courses.
Ooo, when you setup all the constraints, that pain. 😂 Hope they find better way to do repeating tasks.
It didn't take too long! If I was building this without recording a tutorial about it, I would have skipped some intermediate steps and it wouldn't have taken as much time, too.
@ yes, but a "do the same, but for these"-button would have shave some time.
VOLA now you are talking my language... apart for the after effects language. Pretty nice controls on the Rive interface...
Saw 'em live last year with Wheel. Blew my mind!
very interesting, thank you!
The whole blending between states magic is clear and very impressing, but Constraints are not so clear, this part was the most challenging to understand. Was there a way to make this animation (or similar but slightly less complex animation) without Constraints? Can you make a separate video explaining how they work (and why :) )?
Constraints were definitely the cleanest way to make this, I think. You could simply blend between timelines to get a similar effect, but it would be harder to control how the animations transition into one another.
@@joeykorenman I wondered this as well at first - out of curiosity I just tried a blending timelines method but it struggles with blending in and out of the rotation animation in a nice way. Using constraints is cleaner and smarter, yep!
excellent.. well explained... the Dots Still timeline is a little hard to grasp.
What are the exporting steps to test in a website or App please? Is this a tutorial idea?
Can you import svg?
Yep, and you can even copy as SVG in Figma, then paste right into Rive.
wow oke this is pretty cool
I work for a television channel, how could I use RIVE in my work?
It depends... if you work on live broadcast graphics you can control and use Rive files directly in Unreal, so that's one way. It can (though this is still new) replace VizRT and other high-end systems like that. You wouldn't IMO use Rive to replace traditional motion design work you're doing in After Effects, though.
@@joeykorenman Wow, I didn't expect this answer. It blows my mind. And yes, we do have some live shows. I didn't think it could be integrated with Unreal, this is on another level! Where can I learn specifically about this?
@@fernandovillalaz3838 There are some YT videos out there, but it's not widely used yet AFAIK. The Rive team would definitely talk to you about the possibilities though, if you want to know more. Shoot me an email if you want an intro. joey at schoolofmotion dot com.
@@fernandovillalaz3838nowhere! There is no courses or TH-cam tutorials for this specific workflow. It’s a brand new workflow. There is a Rive plug-in for UE that brings in your rive project.
@@fernandovillalaz3838 partly on Rive' official website and TH-cam channel.
Great tutorial althought it`s super counter-intuitive to use Rive... If I wouldnt follow this tutorial it would be IMPOSSIBLE to come up with this by myself.
Whale shark
i come from Cavalry and Spline... so i'm kinda disappointed seeing how messy the UIUX workflow on Rive here. its all over the place to create such simple thing.
actually you can
Clickbait much? :)) You can make this with AE and export it to Lottie and then program the frame sequence segments per interaction.
That being said, you prolly shouldn't since Rive is mostly free. :)
You definitely can’t make this interaction with Lottie without a lot of extra code. The way the two animations blend smoothly no matter when the user interacts isn’t something Lottie files support.
what does prolly mean?
@@LesGaminuscules colloquial version for probably
@@joeykorenman You're prolly right, was just being facitious
"You CAN'T do this in MS PAINT!" Oh really you can't do interactive stuff in non-interactive AE? Shocked.