Introduction to Rive | What is Rive and How to Use it?

1. Welcome to the Class: My name is Bold Bt, and I have been creating Lotti animations for the past five years. I'm a tournament winner Lotti files creator that was hosted on their discord. I am a certified expert as well by them on tra, and recently, I have just become rive expert, as well. And I believe this is the right time to now share my opinion and share my expertise or limited experience that I have gained over the tools and share what I have learned so far. And just show what Rife can do, basically, and why should we even bother learning it? And what are other tools that we can compare it to, and what are the advantages that it offers us instead of just using something else? So let's get into it. 2. What is Rive?: Okay, so what is RIV, actually. Let's just go ahead and start from the very beginning and understand what is RIV. So let's just go ahead and Google what is RIV. Okay? And let's just open our first link, and let's just learn what is RV. Let's just have a look over this information. RIV is an interactive design and animation engine that allows designers and developers to create animate and code responsive graphics in a single tool. Okay, unlike traditional linear animation tools that export static files, RIV use is a state machine system to create animations that react dynamically to user inputs data and triggers in real time. Okay, so this is basically a RV website, and RIV basically offers two types of usage. You can use RIV in the browser as well, and also you can download the app as well, which way we'll get into in a minute. And then we have these really nice interactions that you will notice when I hover over the right part of the button. Basically, a paw of cat comes out of this side, and if I hover over the left side, a paw comes out from that side, and if I go away from the button, you will see that the cat is basically trying to grab me. So this is basically actually activated using state machine. And basically, different state machines are attached to this button. Now what is actually state machine where we'll get into that in a lot more detail. You can see this button is really nice and you can see how smooth the animation is running. There's no lag and it is so beautiful, right? And this is really amazing. Just like when we watch something like Latte on a website or something that is just created in a code base, maybe, then everything works just as smooth as this now. Now, why are we even bothering learning about RV? We will get into that a little bit now. We can create all of this stuff inside RV, so we can create animations for website. So let's just open these up. So product UI. Game UI, and then there is mobile apps as well. So you can see that Figma has actually used RIV for their landing page animations. Metaphy has also used animation. Bend Health also used them, and you can see different type of animations, right? The notion has also used RIV as well, and we will do some comparison as well later on that what's the difference between RV or Lotti? So you can see all of these animations are actually created inside RV. Now, let's just go ahead and have a look at what else we can create in this. You can see you can create Game UI as well. So yeah, basically, you can create entire game UIs, and other than that, you can see multiple other things linked in here in review. We'll discuss all of this in much more detail. Moving on, we have mobile apps as well, so you can create the animation that are used inside mobile apps. Okay. So from perspective of a lote creator, what RV differently does is basically it is just a tool which can do animation just in simple words. It can do much more things as well. But let's just keep it simple for now so that you can understand and digest information really easily. By the way, this is a perspective of a designer slash Animator that I'm giving you. If you are someone who is a developer and you are watching this video, then what I highly recommend is that you highly, highly recommended is that you watch this video from Isa Genus, and I highly recommend anybody who is into development or has touched some development, or even if you are just a designer, highly recommended that you check out this particular video from Isa Gantus. I hope that she approached some really nice stuff more because I really love this one, and I highly recommend checking this out on YouTube, because this will actually clear your mind that how does actually Rise development side works. Okay. So let's just go ahead and now have a look at some of the examples that I have created. So I created this interactive animation. Now, something really surprising here is that you cannot actually re create this animation inside any other software actually that I know of inside other than RV basically. You cannot do this. Obviously, the god of Santa Monica studio did not use if to create it, I believe. They used some game engine behind everything, obviously, and then maybe just built everything in code. But if you are working around, basically you are a front end developer and you are into basically UI animation and design, this type of stuff is all the time done for buttons, UI animations, and you can also do some character animation. And basically, there's a whole lot of new stuff that you can create. But the interesting part is that this is real time. This is actually this is not video, okay? And another example is this one. This is also interactive logo of God of War, which I animated and you can see. That this is also interactive. Now, you cannot create this stuff in Latte, per se, and this is what makes the Rive standout from Latte, actually. And how this is done is basically using the state machine. And we will discuss this in detail how you can do this by yourself as well. But this is just an introduction to show you what is RIF capable of doing? And that's basically it. I hope you understand what Rife can actually do, and let's see you in the next class. Okay, so now I think you understand what Rife can do. Let's just go ahead to the next class. 3. Lottie vs Rive: Okay, so in this video, we are going to compare Rb versus Lotte. So let's just go ahead and deep dive into that. Okay, so here basically, we have the Late files community, and you can see there are multiple basically multiple forums, and you can go through those. And yeah, you can basically learn what the community is saying, what the community is doing. And you can see that basically, this is their community. Okay. And then there is the discard of RV. RV also has a community, by the way. Let's just go ahead and let me Rive community. Let me just open that up. Yeah. So we can compare a few little things. Okay, so this is the community for RV. Okay, so let's just go ahead. Yeah. So there are a lot of feature requests. There is some general chat going on. Okay. So yeah, let's just go ahead and now first talk about some things which we should. Okay. So in the previous video, we were discussing that we can basically, yeah, go to compare RI versus Lotte. So Lotte revolutionized how designers deliver lightweight linear animations for web and mobile. RI is solving a bigger problem. We are on a mission to make hardcore d graphics history with a new general purpose graphic format for all software and UI, and animation is just a part of the power. With an ENT and pipeline for designing building and running interactive graphics across platforms moves, RIs moves past linear formats to enable interactive and responsive visuals. So the custom built Rive render ensures smaller files and faster performance without compromising designer freedom. Guide compares RV and Late across key dimensions to help teams choose the right tool for their project. Okay, so as this states, RIV is basically not just replacing Latte, right? Both tools offer different type of solutions in simple words. Best for interactive UI responses and output basically is production ready graphics with state driven interactivity and live inputs. Just as you can see, the Ga started button is here, right, just like we discussed before. And Late is basically a lightweight linear animation for marketing websites and app interactions. SN bears linear animations with limited interactivity. Exactly. And then you can do a lot of new stuff as well. There is a responsiveness layout, which you can basically not do it in Lotte. It's not basically just something that you can do. Data binding is not basically a part of Lott domain. They have recently introduced motion tokens, but that does not exactly work the same way as RIs data binding. And RIs data binding offers much more complexity and offers much intuitive possible results. And then there is the feathering announcement, where will get into that a little bit. After that, we have masks and yeah, basically, these are actually documents, and this stuff is basically added. And then PU accelerated rendering as well on top of that. And then basically, yes, let's just talk about this. You're going to basically do the design in Illustrator, animate in after effects, and then you are going to export using body movement plugin or you can use the LatifiPlug in as well, and then you can run the LatJSNFle which is basically dot Jason format. We have discussed all of this particularly in my previous courses or classes. You can check those out. If you want to highly recommend it, we have covered tons of different complicated projects, and the UI animation principles are actually same. The tool basically just offers better execution. In some cases, the lot is better or after efects is better. In some cases, RI is going to be better. But the fundamentals are same, so I highly recommend you checking those out if you are interested in learning, particularly about UI animation and grab all the possible information that you can have. So I highly recommend checking those out. And other than that, there is basically the library. You can run it basically almost everywhere. Okay, other than that, they have some CSS studies, and after that, we have this interactive photo as well on the website. Okay, so RIV and Lotti the major difference is the pipeline difference, okay? That basically the Lotte pipeline is basically this, but the RV pipeline is actually completely different. The editor is actually that RIV has built. The format is dot RIV. It is not just a weird format like dot JSON. Now, it's not a bad thing to have dot Json animation. It's just that at the time, the technology actually, Henan Torosi who is the founder of Lotti actually created the Late format, and he's a genius. I have a huge respect for the guy, and he did an incredible job. But it's just not built to offer that complexity or offer that interactivity that RIV can do, actually. So the format dot RIV can actually be exported from RIV itself. So no other software actually exports it. The runtime is actually built by itself, the Rive team, and then the renderer is also built by the same platform. We have covered a lot of different issues in the classes in where I teach all the different kind of animations that we can create using Late animations by using after effects. And in those classes, you will see a lot of stuff which is not actually translating the way it should. We see something else in after effects and something else on the web. And it's kind of weird, even when we are using the supported features. But that is not going to be the case in RIV. I have been using RV over a year now, almost 1.5 years, and I've never faced some weird issue like this. There has been some weird issue only when someone is not using the right renderer for RIF, you have to actually sometimes enable it. When basically they launched the new renderer and they had to do some kind of switching, and at that time, there were some issues, but after that, there has been no other issues. Okay. And if you have some information about latte, you will know that it does not offer glows, basically, right. A huge, huge plus point of using RI is that it can actually offer vector feathering. Now, what is vector feathering? Actually? Let's just search vector feathering in RV, okay? And basically, it is just a tool which basically allows you to add blur, simple as that, right? But you can do so much more using the blur here. You can basically manipulate the blurs. You can create all sorts of animations, and you can see really nice effects are created by it, and the blur can actually be interactive. You can see that the mouse is moving, and basically the cursor is actually getting followed by the glow effect, right? You can see amazing stuff created by using the blurs, right? Now, you cannot do this stuff, particularly using Latte. Now, these are some game changing stuff. Other than that, there is other stuff as well that I would like to cover, which is the let's just go ahead and let me show you that case study, which is, yeah, this one, notion One. I have been noticing a really interesting let's just say revolution that Rive has basically created, which is that basically all of these huge companies are using RV to create the interactive animation. Now, notion is something that most people would be aware of and all of the AI animation of their assistant are actually interactive and those are created using RV. Now, nobody is using Lotte. I don't know the reason behind that, but I actually tried out Lotte creator by myself, and I don't think that the tools are really intuitive. For example, in RV, basically, when you create animation, what you can basically do is you can start from one animation state, and then you can go into another timeline. Basically, let's just consider that this is composition of after effects, right? So one composition into another transition simple as that. But Lotti does not work that way. In Lotte, you have to work in one composition, and then you have to basically lock down the work area just like we would do in after effects, and then you have to dt down those sections and then attach those sections and then create the animation. I don't think that's really a nice way to work around because I tested it out, but I didn't really love the results as well, and it was very confusing to use for someone with my background who has been using After facts. I don't know if that's just me being biased, but, yeah, I haven't really seen some really major projects recently created inside Lotti. So other than that, there is one really important thing to mention here, which is that let's just go ahead and check the Lotti files platform, okay? And let me show you something really nice. Okay, so let's just go ahead and look at the customers. Yeah, let's just see all cases studies. Okay, so you will see here that it says do a lingo, and we'll just click on that. And you can read a lot of stuff here. Now, how actually R basically came into existence is the story is basically simple. Basically, Duolingo was the first client or the user of Rf. Okay? And the team actually started using RV for the first evert I think because this is not just made up information. Go Rosso, who is basically the founder of RV. They basically mentioned this in a podcast or in an interview. Yeah, you can see with Rosso, CEO at RV. So twin brother of Nutsure Luego, I believe, is the yeah, Luigi oso, yeah. So these two are the CEO of RV and incredible dudes, actually, and very supportive and they're really one of the easiest CEOs to reach out to actually. So I really appreciate that how RV team is developing the tool and how they are so responsive all the time. So it's really something surprising for me. We'll get into that in more detail as well. So basically, Duolingo basically actually has currently it is using RIV, and RV was basically not a public tool. It was just being used by Duolingo most of the time. And then, basically what actually happened is that some other animator discussed this with Guido that they should maybe launch because some other people would also like to use it. Now, Joy Cornman from School of Motion has also mentioned something regarding RV that it is really an amazing tool. RV is the greatest new tool for motion designers of the past ten years. It lets you do what Flash used too, but in a much more powerful way. Now, I am not really that old that I have worked around flash, to be honest. And but basically, when they launched Rive, a lot of people were really happy that the flash is back and it is so much better now. So maybe or someone who is experienced enough using flash, they would know what it is actually regarding. Other than that, there has been some really incredible other guest studies as well. First of all, the Duolingo, as we have discussed, currently basically were the first client or the user of RF and they basically has shifted completely to rife animations. And the dual Lingo character basically can do we are basically now covering that what R is possible of doing. And basically, you if you read all of the details, you will notice that all of these sounds actually are basically different mouth rigs. But these are basically attached via back end with the data binding, and that way, basically, you can see that they have actually transformed everything, and the mouth basically moves on the basis of how the words are being said or which sound they are producing, and the data binding basically triggers those mouth moments. Now, this is all happening in real time. The super duo lingo feature, the paid feature actually allows you to video call Lily. And Lily is basically using the data binding feature from R which is really surprising, and it is basically talking to you. And it is basically listening to you and responding to you because that data is basically attached to Rive animation, and that is translating into the animation as it is triggering different inputs. Okay? Now, it could be really hard to understand. But in simple words, let's just say that number one is mouth closed. Let me just go ahead and open a Figma and let me just illustrate this better. Okay, so let's just have a look at what I was trying to tell you. Okay, so let's just say that this is a mouth, and we have different poses over here. And this is let's just say the tongue or the closed or the opening of the mouth, and then we are basically some different sounds coming out of the character's mouth, okay? And basically, let's just say that we have these four different inputs. Okay? So these are just four different mouths, let's just head to one and let me just scale it up. Okay. Okay. And basically, now this is just to simplify the illustration purposes only, so that you can understand the concepts. Okay? So let's just say that these are the four poses and they have to basically juggle in between them. Now, basically, when the user is basically speaking, Lily is not speaking anything, right? So basically, let's just say the number three is the closed mouth, right, like this. Okay. And basically, this one will be activated. Automatically because the data is basically listening and the animation has the condition that when the user is speaking, you have to activate number three. But as soon as the user stops, you have to then respond using different sounds. So let's just say that this is the sound of A, and this is the sound of T, and this is the sound of F, right? And then basically it is trying to say full, then for one frame, it will switch to air F or L. For example, something like this. F 000, and then L. So it is going to do that automatically because the data binding is attached to that and the logic has been created in such a way. And basically, something like this is actually created in RV that you can see, you know, the data binding being connected to each other, right? So something like this. You can see structures like this in RV animation all the time. So this is how basically it is working on the back end. Now, just look at some other examples as well that how RI is actually different. Okay? And why I'm actually thinking that it could be potential use case or a tool that you should learn for UI animation creation. Now, if you notice the Late community or the Late discord, you will see that there is no activity. You will see that there are only there's only one message in July. Nobody is responding. This one is, I think, moderator. Other than that, you can see the community is kind of dead. Now, they have officially announced that the community has shifted over here. Now, let's just go ahead and have a look at the chat and you will see that on July 22, there is two messages, and then we have July 21, one message. And then basically you can see the difference. So basically, the entire July or an entire month is basically covered within 20 or 30 messages. That's it. So basically, not a lot of talk going in the community, and it doesn't seem that a lot of active users are actually using it. And even if you search on LinkedIn, stuff like that, you won't find many cases where people are creating stuff like this. And maybe because there is limitation to lottery features. And other than that, I don't think that there is any particular reason for this. Maybe the tools are limited because there are a lot of features that are not included other than just the blur or the data binding. For example, let's just go ahead and have a look at something else, which is meshes. So let's just go ahead and let me just search for meshes in Rip, okay? Intro to meshes, mesh is Rye, just open a bunch of links so that I can show you what we can do. So you can see you can create these weird, complicated structures, right? So basically, these are images, simple images, you can add basically meshes on top of it, and then animated stuff pretty simply. Late does not offer this feature, and the Jason format basically supports that you work only around vector format. RIV basically solves that issue as well because you can work around meshes, and it does not the file because you can see that how the meshes are working, you can create some really, really complicated animations out of it. And I've tried it myself. I'm not really that great with meshes, so my experience is very limited with this, but it does not. I'm pretty sure of that because you can see here how beautiful this looks, and this is just one image or two image or just divide few images in Photoshop, and then you can just attach them here. Really important thing here to mention is that you can also input Photoshop files in RF and then you can work with those as well, pretty easy. And if there are effects added on top of those layers, they do not basically create much issues. And other than that, one really important thing to mention here is that there is another tool in RI, which is known as the bone tool, which actually offers the rigging, and you can rig basically using however you want. And this is something really amazing. Late does not offer all of these features. You cannot create some really interactive animations and kind of create character animation really a concern here because everybody is trying to create a new dual Lingo because dual Lingo or basically the trend of the UI has shifted a lot in the last few years. Basically, not everybody is trying to create the most minimalistic app. Even if something like Notion, who is basically known for their minimalism is actually using a animated mascot here as well, which represents their AI, right? And most of the company is basically trying to go for a mascot animation approach where their entire identity is basically attached to a mascot or a character that basically guides the user through everything. For example, there is a really nice example which is Byte Paul, something similar to Duolingos character and you can see here. And in all likelihood, I think that this was created in RIV as well. I'm not really sure because this is not mentioned somewhere, but if you research somewhere, then you might find the theme behind it as well. Okay. And other than that, you can attach audio as well. I haven't really used audios using Late actually because Lot actually exports the audio in a separate file. But actually, it comes back to that same discussion that has been mentioned here. The entire animation, sound effects, everything is inside one single file, the datery file, but that is not the case when you are exporting a JSON file because the audio file is exported separately. And then you have to give that to the developer, and he will have to find a way or attach it somehow, you know, also one really important thing to keep in mind is that Lottie does not offer the interactivity, whereas what actually RIV makes better is what basically is the huge benefit of using RIV is the problem solving aspect, which is that if you are creating the animation, you do not have to it's not just that the tool can do interactive animation. The tool basically allows you to add all those interactions inside the creator or the software itself. So you basically do not have to give a lot of headache to the developer or the back end team. Basically, you can add all the interaction here, so it is basically can be handled by the animator, slash designer slash the developer who is doing the animation, right? You can do create all the logic here, and then basically you just have to simply attach all of that data with the backend. That's it. Pretty simple. You do not have to type in those conditions that if the mouse is over here, then just make it bigger. You don't have to do all of that. You don't have to go through all of that headache and basically, what we are trying to do as an animator or as a designer is basically solve complex problems. And if you're going to create another problem for your client, then it's basically not adding value to the project or you are not basically becoming a problem solver for the project or the client, right? So the amazing thing here is that you handle all of that by yourself you're not just creating extra mess for the development team to handle. And also really amazing thing here is that you can also see stuff like this that it also flags out the problems. There's a console which actually shows you what you are actually doing in the animation. Okay? And then you can do some testing here as well. There is some changes. There's so much Rive that you can do. And also really very important thing here to mention is that the community aspect, okay? Now, because there's a lot of discussion going on in let's just say the lot of this survey is basically kind of dead now maybe because they have shifted over here, but you can see that there is not much discussion going on over here as well. But let's just compare it with the arrive community. Now, you can see, let's just scroll down and see how much messages or chat per day is going on. So it's day one, and we are going up, we are going up, we are going up. It is Day two. And then we have Day three, and then you have day four. Now, and not much going on this day. So obviously, this happens. And then, yeah, a lot of messages. And you can see that people are basically sharing and creating stuff. Now, let me just go back to Late Community or Chat. You don't see really people mention stuff like this. So here, some issue is mentioned. Other than that, not really stuff being created by the community, right? And whereas, let's just Jac arrive community, you can see that there's a lot of stuff going on. Okay? And something really surprising here is that it is so so much easier to reach out to the team. You can even tag Guido as well. He's basically the founder of the team or basically the founder of the Rive as we discussed. And I was basically going through some trouble because I was trying to submit a contra challenge, but I couldn't actually find a option in the tool. And Guido basically replied me because within an hour, I think, and if he does not reach out, somebody else will from the team. So there is constant support going on, which is really, really amazing. And the shocking part for me is, and I really big, big salute to the team that they ship the updates really, really fast. Like, basically RV basically updates the software on a weekly basis. And I'm not kidding. Sometimes it is updating twice per week as well. They are basically sometimes just debugging some stuff. Sometimes they are adding a small little detail that the community has requested. And then other than that, basically, you can just share your work as well. So you can share you can see a lot of work is being shared here. Right. So people are basically creating entire show reels inside, as you can see here. But I haven't seen all of such stuff using Latte. And really one kind of I think it will be the final takeaway from this is that company like Spotify has also used this. Now, what they use it for is really interesting is that Spotify wrap is something that people wait for at the end of the year. And I believe that you understand what Spotify Arab is where basically you understand or basically check what kind of song you were listening to all year and basically that Spotify Arab animation was actually created using RV. And something really interesting here to notice is that Spotify has so many listeners or users. And basically, the data binding has been, for example, attached. To the user profile, for example. So because everybody is going to basically see their face in their Spotify, right, or every artist on the platform is actually going to be added on the Spotifyer animation. So that is basically done via using data binding. So for example, if we just go back over here, let's just create four circles so that let's just say that we have four artists, right. So and then basically what we have here is that now definitely there are so many more artists than four, but we are just taking this as an example, right? And basically what's actually happening is through the data binding is what actually is happening is that let's just say that I listen to this artist, right? Now, arrive basically Spotify has my data. Now it is basically going to create my animation on the basis of what I'm listening or which artist I am listening to. Now, the current profile picture of this artist is going to be attached into my most listener or the artist that I have listened to most will be added over here. So basically, the placeholder inside this animation is basically a placeholder. It is basically going to respond to every single creator that the platform has. And once it matches that data point, it is basically just going to pick that data point. Now we are not going to see all of that definitely because RI is really, really smooth. And why is that? Because as we discussed before, it has its own pipeline. So the animation runs really smoothly. And we haven't really seen any backlash that the animation broke, you know, I mean, if a team like a Spotify using something, then I don't think that there is a point to worry, actually. And the Duolingo was basically basically they are the OG of mascot animations in the UI field, and basically their product is the most animated product on the Internet, I would say. And if these tools are using, which are the top tools, like they are the top 1%, right, in their domains. And if they are using those tools, then I think they would be using the best tools because they are also the best guys or the best companies in their domains or their field of expertise, right? So you can see that they would also be thinking about creating the animation in something that is a scale label, and definitely it is a scale label, and that is why they used Rive instead of using anything else. So I believe that covers everything what Ri can do, which Lotti cannot. And I think that covers everything what Lotti cannot do, but instead, Rf can actually do. So I believe now you have the understanding of what Rife can actually do and what Lotti cannot. And I believe you have done something new in this video. Let's move on to the next one. 4. After Effects vs Rive: Okay, so now let's just compare after effects with RIV. So let's just go ahead and have a look at after effects. First of all, really, very important thing is that in after effects, you have a lot of plugins and scripts. Now, scripting has been added into RI as well, but it does not work the same way. Basically, there are pre made tools and extensions and stuff like that. Inside Aftereffects now, definitely because it is a much older tool as well. And also the use case for both software is very, very different. Now, because aftereffects is a compositing software or 2.5 de animation software, and it is basically created for two D animations or three D animations or compositing, basically, you can do a whole lot of stuff in after effects. You can create explainer videos, you can do character animation. You can do compositing, a really great example of what actually is used. A really great example of the usage of after effects is Jalex Rosa, who is basically a compositing kind of director. I do consider him basically director who creates basically all of these animations. And if you actually watch one of his videos, you will notice that he basically does the final compositing inside after effects, and the rest of the video is actually created in blenders, sometimes enopod stuff like that, and sometimes frame by frame animation, stuff like that, but the final result is actually composited inside after effects. So live action stuff, explainer videos, stuff like that is basically, let's just go ahead and have a look at different example of explanatory videos. Now, let's just say that this scene had to be created in RV. Now, definitely, you can create that in Rive. But if you want to create some really magic transitions, you want to work around five examples just 60 seconds of animation, right? Ideally, it is not the best tool, because it is created for interactive animation, not explanatory videos. Now, the same way, after effect is created for compositing and complex animation, not interactive animation. That is why it is not offer Dottery format. Now, Hernan Tosi is basically the founder of the body movement plug in and he also invented the Late Jason format, basically. And really something important to highlight here is that because the company is evolving so much, this is also some exciting news that basically Hernan Tosi has joined Rive as well, by the way. So founder of Flat Hernan Torisi joins RV. Let's just read about that as well a little bit. So this is the legend himself. And you can see, as he says, when I first found Rive a few years ago, I was navigating through their site. In all of the set of tools they had developed, then I met Guido and Luigi, basically the boss CEOs who shared their plans for the future. And it was jaw dropping moment, interactivity, the editor, state machine, bones, constraints, and so much more, it felt unreal. I became an instant fan and have been following their progress since then. When they invited me to join the team, I was thrilled to have an opportunity, but for personal reasons I couldn't accept back then. Time went by, R became an even more amazing tool with everyone talking about it and using it more and more. Finally, things aligned and they were kind enough to extend the offer once more. I immediately said, and this week starts my journey with an amazing project and team. Okay. And basically, this post is 16 October 2023, right? So now, this is something really, let's just say surprising for me as well that I mean, maybe there wouldn't be so much potential in Latte anymore that Hernan also joined Rive instead. Or maybe he could have thought that, why not invent something similar to this, but use Latte instead or develop something like that. I don't know why he didn't do that. I'm not the expert here, but the plus point here is the positive side of the story or the good part of the story which is, I mean, there must be a reason why an expert like him actually joined Ri, right? So it's like he could see the vision or the update or I mean, someone who basically developed Lotte if he understands that R has so many exciting features or updates, and he was thrilled to join the team, then obviously there is something about the tool, right? Okay. So this was something worth mentioning, so I thought, let's just do it, okay? And now, regarding RV or the Lotte, something really important that I should mention, which is that I have created all these animation inside after effects using the after effects, basically and then exported using body movement, plug in. Now, if I had to create something like this, I would still choose after effects. Why? Because the layer management is so much easy and it is going to save me so much more time. The layer management in RIV is currently horrible. Maybe more shortcut tools are added, maybe it will get better. I'm not sure, but currently, if there are 400 layers, it is much more easy to manage all those layer inside after effects if you are comparing it with RIF. And why would I choose something like this or RV? Because I mean, RV offers so much more features, you can do a lot more stuff. I would only choose this in cases where I do not want any interactivity. If I want to create something which is perfectly loopable animation, then I'm only going to choose after effects, basically. Okay? Because I can adjust a graph editor really easily. There are shortcut keys. There are extensions, there are plugin, there are scripts. I can basically just offset the key frames, stuff like that, really easy to do. I can't do all of that really easily R. Some of that stuff has to be done manually. So these are the core differences, I would say, between the tools. Other than that, there is if a project requires something like just say you have to add interactivity to some elements, even if it's a button, right? Or even if it's a character who has three pauses, happy, angry, and sad, maybe, you know, stuff like that, then definitely you will have to do that stuff in RIV. Now, you may say that if you are creating something like, let's just say the dual olingo animation, right? If you are creating something like that, let me just go back to the Duolingo page. Okay? And if you are creating animation like this, which is really complicated now, in that case, let's just say that there are 400 layers that you have to work with. Now, in that case, because you have to work with interactivity, I mean, you will have to compromise on the layer management. You can't really do something about it. So the key point here is that what you are actually trying to create, okay? And if the end result is going to be something interactive animation, then definitely hands down, just go to RIF, okay? And regarding the design, I highly encourage recommend that instead of using Illustrator, try to use Figma because that works really well as well. Or basically, you can just copy and paste, export SVG from Illustrator as well to Figma and then or basically export the SVG and then just dragon drop the SVG and then work with that in RI as well. Now, we're going to discuss all of that in detail, but if you are working or creating something like basically, if you are going to work with the UI animations, then maybe it is UI design that has been created in Figma. Then you can actually copy and paste stuff from Figma, really easily. I'm definitely waiting for some plugins so that it makes things much smoother. For example, overload from Battle x, right? I think that they have plans actually to create overload for the arrive. So I'm still waiting when that happens, because then you can just hit one click and then, you know, everything is inside ripe. So really looking forward to that time. So they have mentioned this detail somewhere. I'm not really sure that we will be able to find this or not, but when they were releasing this, they actually mentioned this. I couldn't actually find the part where it says that they have the plan to create it for RIV as well. But they have definitely mentioned it, but because I think that they have updated their landing page, I couldn't find it. So basically, that's it. And I think we have covered everything related to after effects and the comparison of that with RV. Okay. So that's basically the comparison between RV and after effects. I hope that you guys understand clearly that where interaction enters, after effects cannot handle that. And other than that, after effects is a great tool to create complex animations, but it just can't handle interactivity. And that's it. 5. Introduction to Rive: Okay, so now let's just go ahead and have a little bit of introduction regarding RV and let's just explore RV. Okay. So let's just go ahead and create a new file. Let's just go ahead and keep it the same size, and then just create hardboard. Okay, so now basically, you will notice, first of all, there is this design and animate tabs, okay? So design and animation are handled separately. Another difference between after effects and RV, right? Okay. Other than that, there is this hierarchy. Re key difference here is that the animations basically are known as timeline instead of composition. So please keep that in mind. The timeline is equal to composition. That's it. Other than that, one really important thing to keep in mind is that once you add a circle, for example, let's say, right? And we have this color right here. Oops, we have to be in design mode. Please keep that in mind. Okay? And then let me just remove this keyframe. And then basically we have this right here. Okay? Now, you will notice that we have this ellipse over here, and let's just call it ball. Okay. Now I'm going to hit Y, and it basically works the same as it does in after effects. Basically, we have the free toool over here, okay. And now let's just go ahead and cover all the tools. Just give me a minute. First, basically, I want to show you something really important is that you can hit Tab on your keyboard and you can toggle between the timeline. And the design and the animation. Okay. Simple as that. Whenever you are doing some design, you have to keep in mind that you should be in the design tab. Otherwise, if you create something here, for example, if I move it here, if I go back, you're not going to see that changes in the design, actually, it has added keyframe over here. Now we are going to discuss this in detail, but just to keep this in mind that this is really very important. A really, really important thing to keep in mind is that, whereas, it does not really much matter if the latte size or the composition size of the latte is exactly the same that the developers have asked you if there is no negative space around your design, the developer can basically scale it up and scale it down. It is not really going to give you much headache, but that is not the case with RB. It is not because you cannot scale up or scale down the animation. If the layer is SVG, it is going to stay SVG, so it is going to stay vector. It is not that this tool only exports animation in raster imagery. Not the case. Please keep that in mind. But just because the integration is a bit different, it is better to have something organized, something more organized and something that actually fits into the product much more easily. Okay, so now, first we have this tool, which is the selection tool, basically our mouse, then we have the translate. And once we select that, let's just click here. And then basically what we can do by using this is that to be honest, I don't really use it because I just use my V. That's it, and I haven't really used translate key. After that, we have the rotation key. We can definitely use that to rotate. And after that, we have the scale, which we can use do the scaling. And this is really important to notice here is that we are only changing the scaling value. We are not changing the origin size of the ellipse path. Okay, really, very important to keep this in mind. A really amazing thing here is that once you click on the dit vertices, and obviously, you know that this is currently a ball, but we are converting this into a path. A really important thing here is that if you go into the dit vertices, you can actually work or edit every vertice and basically animate that as well. And really another important thing is that once you select it, for example, let's just say that you are going to face this type of issues when you are animating some kind of hair in the character or when you are actually trying to animate a path or a face of a character or maybe just the arm is overlapping over the body, then you will have to select multiple anchor points. Arrival offers this nice way of actually selecting the anchor points, and then you can basically drop them to basically change the shape of the path as well and also basically deform it to create something that you like more, you know. So it looks really nice. Okay. Other than that, something really important, another rule. Basically, these are kind of like a rule, you know. So whenever you're doing any kind of project, you have to keep these things in mind. It does not matter what you are trying to create. It is better to follow all of these rules to practice. Now, when you have created your entire artwork, let's just say that we had two balls over here, right? And we have let's just say we have hit 50 50, right, or let's just drop it down to 20 or yeah, 20. We have these two. We have to group these two, okay? Basically what we can do is we can move it around, right? If let's just say that these were two eyes, we want to move the group layer as well. What you're going to have to do is just group it again and then basically just call it root. Now, do this every time you are creating an animation inside drive and just create a root group where everything inside it basically just stays there. Why? Because in case that something has happened bad or maybe misaligned a bit. You can just click on the root group and you can just bring it over here. Or you can basically just move it around the way you like, okay? So this is really going to help in those manners. So as we discussed that you can press shift and select the layers, and basically, you can select multiple layers and then create auto layouts as well, but we are not going to get into those. Other than that, there is solo animation, which can be used sometimes for buttons as well or also pose to pose animations, where sometimes a character basically changes its eyes from one style to another, basically, then it can be used or if the character is changing its arm, you know, for example, if we have one like this, then we have arm to. Let's just say that the character has this first arm where we have basically the character in a blue color, you know, nice and calm, and then we have the character in an angry mode, you know, let's just say something like this, but with a weird shape, you know, like this. But I want the character to shift those arms. So one can be enable at a time, right? So what I can do is just click over here, go into solo, and I can just create solo like this, or what I can do is basically just control G and then basically right click over here and then go to convert to solo. And then I can basically just enable one layer at a time. Please keep this in mind that the group has the origin right, and if you change that origin, everything inside that group also follows that origin. So this is really something important to keep in mind, and you can see, when I change the layer inside it and then go back and edit it, you can see the arm is moving the same way. So this can be helpful when you're creating character animation. Okay, moving on, we have the component. So basically, this is just like pre comp inside after efect as you say. Now, it works a little bit different. Or if you work in Figma, basically, it kind of works the same way. The components work. But there are so many additional features here as well that you can use the same component. But if you have, you know, build a website, there is a feature known as CMS, where you can keep the same element but change the data inside it. So you can do stuff like that with this as well. And this is a much more detailed topic, so we will discuss it in a later class. And then after that, we have simple shape layer tools. We have the pen tool, right, simple stuff, pretty simple stuff. If you have used any designing tool, it works the same way. And one interesting thing over here is that you can basically just select any anchor point, and you can adjust how it basically um can be handled, you know? So you can attach it, Dattach it, stuff like that, pretty simple stuff, nothing too complicated. And again, you can press and do all of that stuff as well. Okay? The same way that you can do it in Illustrator. So pretty simple stuff, nothing too complicated. And after that, we have the text tool. Really powerful tool, you can do a lot with text tool. And really important thing to keep in mind is and one key thing to keep in mind is that the text tool in Um, RI basically offers all the Google fonts. So if some product is built using some font that is in Google, then that is really, really a huge plus. And you can basically just select that font from here. Let's go ahead and search for Inter, for example. Okay, so that is already selected. And then you can go for let's say different text. Okay. And you can do a lot of stuff, actually, with this as well. For example, you can animate this weight as well. So you must have seen those animations where the text basically just gets, yeah, thick and then thin, you know? So you can basically just loop it. Okay. And then there is feature and stuff like that, which I haven't really gotten into because there hasn't been a need so far. Okay. So we have the text tool. We have a lot of different stuff. So basically, just like text modifiers basically works like text animators in after effects. Okay. So something similar to that, we can add different you can see that the range is basically getting affected, right? And then you can basically add things like opacity, rotation position, stuff like that. So let me just hit offset like this. Okay. And then let me just try to do this. Okay, so the range should be 0-100 and then you can see how the animation is being created. Okay. Now, definitely, this is a much more deeper topic. This is just to showcase how you can do it. Okay? So just telling you where the interface is actually like. Then we have the bond tool, basically used for character animation. Simple as that, you can add bones, pretty simple stuff. Okay. And then we have basically the weight tool. Basically, it can be used to add or shift bone weights. Then we have the event. Event is basically something which can trigger and something that is happening inside a composition, for example, or on Canvas, then it can basically trigger that with a listener input. It is hard to explain. It will be better to showcase you an example. Basically, it's like a bell button, let's say, for the data to actually detect that something is triggering or something is happening. So pretty simple. And then we have scripting, which is basically, I would say that this is something that a developer would be better if he explained that. I've used one or two scripts so far, so not really much experience with this, but it can do a lot of different things, definitely. I've seen multiple examples, and I will be showing you some guess studies from that definitely soon. Okay. And now let's just delete all of this extra stuff. And let's just try to add a key frame to the animation, okay? Now, let me just put it down here. Okay. Then let me drag this one as well in the center. Okay, so we have this ball over here. And now let's just see what kind of animation tools we have. Okay. Let's just go ahead, select the ball. And then what I'm going to do is now one key thing to keep in mind is that when you starting the animation and you are going to create multiple states, let's just say that when you click on the ball, it animates. When you take your mouse out of it, it basically stops. And when basically you hover over it, it basically changes the color, you know, stuff like that. One very important thing to keep in mind is that let me just go ahead and first call this idle, and then I will explain to you that. What does it mean? Okay, so now we have three compositions, basically. By the way, I'm doing this really simply. By the way, if your panel is hidden somewhere, you just have to click animations and then it will pop out. And as of these recordings, RIV is completely free. You just have to buy your subscription if you want to export your animation to Dot ry file. But there is no cost to learning the tool. And if you check my case study, you will see that I don't actually share Daughter animation files because that's the file that will be going to client because that is a real input file, right? So basically, you are going to be showcasing animations in videos or if you don't have a R paid plan, what you can simply do is just do some screen recording. Simple as that, use OBS, just like I'm using it right now. And then what you can do is just do some basic compositing inside after effects or any other software that basically supports masks, and then basically just create your portfolio out of it. Simple as that. Okay. Okay, so let's just go ahead now let me just go to the state machine, and we have the idol here already. For example, let's just say that it is not here. We can just drag and drop our animation like this, okay? And then let's just say that we go from entry to here. Just ignore these two. For now, we are barely going to use them ever. And then after that, we are going to go to our color change, okay? And then after that, we're going to go to our position change. Pretty simple. Okay. And now what I'm going to do is basically is that let's just ignore the state machine for now, okay? And let's just say that after the color changes, I want the animation to actually go to start from here actually, okay? And then go to here. That's it. Simple. Okay. Simpler stuff. Pretty simple, okay? And there is no animation over here. And let's just say that I am thinking of keeping it here for now, okay? You will notice a very weird thing here that the animation, the keyframe is added here, right? It should be here. But why is it here? There is no key frame? What is happening actually here is that let me just go ahead and first create the key frame on the color value, okay? And then what we are going to do is we're going to change the color back to green now, okay? Now you're saying you must be thinking that we have the dal keyframe here. We have the green keyframe here in the other timeline, then we have the position change over here. But if I add the keyframe here as well, let's just say like this. Okay? And I'm going to go ahead into the idle one. And then basically just copy and paste the color value. Let me just go ahead and copy the color, then just paste it over here. Simple. By the way, wherever your header is on the timeline, you basically just add keyframe there. So if I change the value over here, you're going to see if we have added a keyframe. So we start from here. We change the color like this. Now, wait. Why we are not affecting the color here, right? Why is that? First of all, you have to keep in mind that if you're going to animate one property, it is really important to first plan the animation before creating the key frames inside ive. This is really important. For example, let's just consider that there are 50 layers over here, and the client simply wants you to change a very small detail. For example, the eyebrow color of the design. For example, this is an eyebrow. Okay. By the way, if you want to add fill or strokes on a path, you can just go into the fill and stroke, take out the fill or a stroke and then just add a stroke here as well. Simple stuff. Pretty simple stuff, okay? Very basic. Just like it works in Figma. Very similar to that. Let's just say the designer or the developer say, Oh, there must have been a mistake. Ohh, Oh, no. Oh, no, no, no, no, no, we have to change it. Okay. So then what you have to do is basically just change the color. Simple enough, but not actually simple enough. Why? Because let's just say that you have ten pauses of character animation, then you have to just go everywhere. And then what you have to do is basically add one key frame in each one of them. Or if you want to actually just change the color, what you have to do is just go back into the design mode. Very interesting thing here to notice is that if I go here and then just make it like this, then go back, you're going to see some really weird things happening. We have blue colour hair. We have blue color hair. And we have red color hair. What what I mean, what is happening? Okay, so now I'm going to explain this to you really, really simply. Okay? Let me just go ahead and basically delete this layer. I don't know why the delete key is not working on my keyboard. There has been some issue maybe. So let me just turn it off. Okay. So let's just focus on our layer one only or our ball only. Now, why the issue is happening, why? What just happened? Why we cannot understand it is very simple. If you're going to create an animation, the simple less thing is you have to first match everything with the design. As I said before, you have to do the design entirely here. Don't do anything here, do everything here. Okay. Now we have the color here. This is our finalized color, for example. Let's just say this is not the finalist color. This is our finalist color like this. Okay? This is finalized. That's it. We're going to the animate mode. We have to delete our key frame. Now you will see that we are back to the green value, which is our original value. Now, if there is going to be a roadmap between the animation, if you are going to, let's just say animate position in this timeline, you will have to add two Dummik frames here as well. Why does that happen? Now, here is what is actually happening. Let me just draw something for you really nicely. Okay. So basically what is going to happen is, let's just see if I can explain this better. Here is how the state machine works, okay? Let's just create a rectangle, and let's just say that this is our state machine. Okay? And this is basically one animation, okay? Let me just go ahead and make it like this. And then we're going to draw another color like this. Now, this concept is really, really simple and it is kind of like a child's play for someone who has even a little bit of background in development, I would say, or has done some back and work. It's pretty simple. But I know when I started out in Re when it was my first day, I was basically, you know, crashed out for an hour because I couldn't figure out what is actually happening. So basically, this is what is going to happen. Let me just obligate this text here as well so that I can explain it better maybe. Okay. So the data, and then we have this 120. So every timeline has data, okay. Simple as that. And then what actually happens is there is just, as you know, in after effects or anywhere, when you create an animation, what actually happens is you are basically creating interpolation, you know. For example, if I create animation like this, 12 K frames, I make it like this. The interpolation between these two value right here is basically increasing as you can see here. So we basically are telling the software that go to 100 opacity from zero within 12 frames, and the software basically figures out the rest of the calculation and values. Now, the same thing is happening here. Basically, every time line has data in it, okay? Id is basically data of animation, that key frames that we have added inside. And then after that, what we have is the color change. After that, what we have is pretty simple position change, right. Now, if you add one key frame on position over here, let's just say that this is our position key frame like this. Let me make it like this, you know, Yeah, looks better. So let's just say that this is our keyframe and let's just make it a better color, right. And let's just say that this is our kframe for color. And this is our key frame for position. Okay? Now, basically, this is what is happening. We have the idle. We have the color change, and then we have the Mbadry just select both. We have basically the color change, and then we have the position change. So this is our position change. Now, we don't have those key frames, right? And then we don't have the color change over here. Okay? Now, what is actually happening over here is if there is no keyframe over here, it cannot actually interpolate the values from here to here because there is no transitioning data for transition to happen, it actually has to go through some different data. Let's just say that we have changed the color right now, right. But after that, the color is basically not changed. So then what actually happens is the color that was actually the original one is basically actually triggered over here. So if you want this color to appear here, you have to basically just duplicate it like this. Simple. And if you want the position to change, right, then what you have to do is basically add that keyframe over here as well, the final keyframe, or let's just say, Okay, so for example, if we have this position keyframe here, let's just go back to the previous computer. You'll see the position is 333, right? Let's just copy it. Now, keep in mind, we don't have a keyframe over here. Only changing color over here. Now, let's just add position over here, okay? And you will see it is not adding anything here. Why? Because I need to first add key frame. And then I just need to control C, copy and then paste it over here and then hit Inter. So you're creating the animation like this. Simple. Nothing too complicated. It just make it longer like this. Okay. Sounds good. Now, you will see that we have this animation over here, pretty simple. Then we have this animation going up. Okay. And then we have this animation over here. Now, we want to keep the color value over here, same. Let's just delete the color key frame. And then the color over here is what is it? It's this can kind of color ride. Let me just go ahead and create a keyframe over here. Now, this is basically not going to pick color from here. Why? Because it is basically following the keyframe, which is already added over here, right? So let me just delete this one and then let me just copy this value because I'm going to forget. So let me just delete this one. You will see the default position is the same. Now let me add keyframe over here. Let me add keyframe over here, and then copy paste. Now when I go ahead, you will see we are not changing the color here as well, because we haven't added the color keyframe. So basically the ideal way to do this is you have to go into the first composition, the dal composition where nothing is basically animating, nothing at all, right? And then from that, you have to basically go through a journey. A stated machine is kind of like a journey or kind of like a path, and you're going to basically drive your elements or character through that path and going to basically take them through that journey, okay? And that is why now we know what we are going to animate. We are going to animate two properties, and what are those properties. First, we have the color. Second is the position. We added both keyframes. We're going to go ahead into the color change. We're going to add both keyframes here as well. The color change is already added, but the position wasn't added. So we added that. But the really important thing to see here is that we actually want to animate our ball. Okay. By the way, I think we only have animated our ball group. So let's just stick to that for now, okay? Do not make it more confusing. So we have added two keyframes. Now we have two keyframes over here as well, but we are only changing color. Pretty simple. Very easy. Now, what we're going to do is we're going to copy these two keyframes and paste them here. Pretty simple. But the color value should be this one, right? And basically, we're going to copy this and then come to the start because the ending point of this composition should be the starting point of this composition. That is how the animation is going to be smooth. So let's just paste it over here. Simple. So let's just play first one. Pretty simple. Let's just go ahead on the second one. We are changing color. And then we have the position animation. Now, something really important to keep in mind is pretty simple, which is let's just go ahead and experiment around letting me animate a scale. You can see we have added the keyframe when we change the property, right? And let's just go back and you will see we are not changing the scale ear. When we go back, you will see we're not changing the scalar, right? So pretty simple stuff. Same basic concept. Let's just remove the keyframe. Simple as that, right? Everything is working nicely now. And now you can see that the animation is not breaking because we added the keyframes. Okay? So this is very important when you are actually creating the animation. Side state machine. This is really, very important, okay? Because one estate is going to go into another, and the interpolation needs to have that data. It is really, very important, okay? These are kind of like crucial points basically that you have to keep in mind, okay? And I've tried to simplify it as much as possible. Now, a few really nice tricks or let's just say tools which I love about Drive. Let's just go and check those, okay? Let's just delete all of this, and I'm just going to go ahead and remove these two. I'm just going to go into the ball and then just going to position. Remove the K frame from the group, and then we're going to basically animate it going up, and then we can go to the 40th keyframe. Then we're going to paste it. And then basically Rivet also let's just remove the color Keyframe. Yeah. So basically RV actually offers this basic interpolation, very simple throughout UI animation tools, but unlike after effect, as you can see, aftereffect does not have this. After effect has something like this, which is called the flow, but it is basically very basic interpolation, but something great like after effect is inside drive as well, which is the graph editor, actually, okay? And how you can enable that is by clicking over here, and then you can basically just play the animation and see. Okay. And then what you have to do is basically, if you want to enable graph, you have to go over here and then click on Cub value or hit F nine on the keyboard. And then what you can do is do this. Let's see a result. Oh, nice. Really nice ball bounce animation. Okay? See? Pretty simple. Now, the lovely part about RIV is that we're going to get into that in a minute. Now, you can see the basically, it is the value graph, okay? So do not expect that there would be a speed graph, there hasn't been any confirmation, and basically, you can work around value graph as well if you are a good animator as well. So R actually currently only offers valegraph instead of speed graph. So I hope that's enough for you as well. Instead of working in tools where you cannot actually work around graphs, it really breaks my heart that you cannot adjust the easing. Okay, so let's go back to our timeline view instead of graph view. And now let me just show you something really nice. We have timeline options where you can basically look at hierarchy or custom and apply all to design mode. I'm not really sure what it does. Applied current play head values to design. Oh. So this is something real nice. For example, if I want this value to be at the start of the animation. For example, I want this to be here at the start. I think what I can do is click here, apply all to design mode. And then, yes, our ball is right here. So this is something really cool. Now it is really surprising that as I'm recording this, I'm also learning something new that I hadn't explored actually, because these kind of things are actually not really, you don't have to explore these features because it doesn't come to your mind that, oh, I have to use it. But if you have to use it, then definitely you can find it actually. So my main focus is most of the time entirely in animation. So I don't copy values from here to design mode, actually. And one other reason behind that is that I pre plan design actually, and then execute the animation part. So also, this is something that will take some time to learn. You know, you're going to make a lot of these mistakes that you have done a lot of editing, but it is done in animate mode. And when you press tab, you will end up in a horrible situation because the design is entirely different. So in those cases, this tip can save you, right? Okay, another thing, which is this work area. Okay? So this one basically allows you to handle the section of the animation, and then you can basically play that. And then it is basically going to just export that part as well of the timeline. And if you are exporting PFOe, then that will be the case as well. And let me just make it full. Now my favorite feature is if you're familiar with Late felt and after effects, you might know actually that Late does not support time remapping feature, which is basically used to slow down the animation or speed it up. If a client requests for a 15 second animation to be 20 seconds long, you have to go ahead and manually basically adjust all most every key frame. And if you are creating something like a product UI animation, it is basically a nightmare, and it basically waste a lot of time on the revisions. Now, something really lovely about R is that now, I mean, I love this kind of features. It basically saves you a lot of time, and it also gives me that perspective that this was actually kept in mind while the tool was being built, that these type of features can also make a huge difference, and these type of features can also help you achieve different results of animation. For example, if you're creating animation, where a character is angry, and if you want to show that the character is moving fast, you not have to basically do the entire animation. You just have to click our hair on the head. You just have to make it to X. Okay. Now it is not working maybe because it does not work that way. Yeah. But you can definitely decrease down the speed as well. So I'm sure about that. And if you want to increase the speed, by the way, you can do the same technique in Alt click as well, by the way. So you can do that as well. But let's just say that you have animated 100 layers one after the other, and then one after that one and one after that one, and you can't just all tap them. Because then the overlapping of the layers is going to basically mess up. Then you can also come here and you can basically drop down the speed. Now, you can do it whatever you want, 0.1, let's just say. So let me just go ahead and show you. See how beautiful this looks. Also, something really interesting here happening, which is that the playhead speed is actually matching the value over here as well. You know. This is also, I think, really nice if you are experimenting around figuring out what should be the timing of the animation should be. Then instead of dragging and dropping different keyframes, what you can do is basically just readjust time from here. One really key element that you have to keep in mind while animating is that RIV does not actually work on 24 FPS or 60 FPS. It basically depends upon the device of the user that how much keyframe it can possibly show to that device, and then it is going to basically play back the animation on that speed, which is quite interesting. So let's just say that if there is a device which is really nice and it has 240 herds display, then it will show 240 frames on that device. If you are using quantize feature, then it is going to limit your keyframes to actually whatever you type here. Okay. So something really important to keep in mind as well. So by the way, we can just drop it down to lb as well. So we'll just have a look at that. Okay, right? And the same thing happens. And let me just turn off the quantis and let's just see it. See? We see 12 keyframes here, but the preview is not 12 keyframes. The animation is so smooth, right? So this is just something that you can keep in mind. Let me just make it 60 again. And something really nice, another feature, which is this loop Now, if you ideally work using let's say you have worked before using Lotte, what you will know is that you have to create the perfect loop animation, and then basically the developer can basically make it play on loop forever. That part can be handled by the developer. But if you have created the animation inside Drive, you can just make your composition loop. And then the animation is going to basically loop forever. And the developer does not have to attach any sort of code for that. Something really interesting again, and I think this type of feature are really something that really showcases you that. I mean, okay, nice. Great. Now, there's one less headache for the developer to handle, right? Okay. And now we have the ping pong. See? These are the type of things that I is built for, and I hope that you guys learn something. See? So these are the type of things that RIV is built for. So interactive animation, now, definitely, we haven't added any interactivity to it because I want you to basically digest all the new information. And if you want to know what a single or a particular feature does, then you can definitely check out their so studies. You can go through their YouTube channel as well. There is some really nice stuff that they have uploaded. So let's just go ahead and see RIV app, and let's just open the channel to show you something really nice, okay? And basically, if you go into the playlist, you're going to find five plays, basically. So there is the stat machine where you can learn everything about the state machine. There is R one oh one. There is the layout and tips tips and tricks, and then there is vector feathering. And let's just touch a little bit the vector feathering as well so that we can really understand the difference huge impact that the vector feathering has added. And before I discuss vector feathering, this is really important to mention that vector feathering is a different technology than any other blur. So basically this technology did not exist until Rive invented it, so it does not work the same way. The Gaussian blur, for example, works. So it is a technology that only works arrive and Rive has actually developed it or invented it, which is really amazing and very kind of shocking for me. So let's go ahead and let me duplicate this one, or what you can basically do is you don't have to duplicate it. You just have to delete it. A let me just go back into the design mode, just like we should practice, add a fill. Okay, now you can see we have a fill here. Let's just go ahead and make it a radial gradient. By the way, you can add gradients as well on the layers. Nothing too shocking, I would say, pretty simple. And then what you can do is you can basically go into this part, then basically make it lighter, right? And then you're going to go here, make it white, and then you can add basically Inner glo as well, you can add out glo as well. So it depends upon what kind of blood you want add completely up to you, completely your creative freedom. That's it. And then, basically you can also duplicate it, by the way. And then let's just duplicate it. And then let's just experiment around to show you what different types of results you can achieve via this, okay. Um, yes, so a bit of purple here would be nice, I think. And then let's just make this one instead of green. Also pink, maybe or a bit blue. Yeah. Sounds good. Looks good. And let's just make it bounce. And let's just see how it looks now. Okay. Now, definitely you can improve the look of it, but the whole point of showing you is how much you can create with this. You can add a lot of depths into character as well and are really fantastic example by RF team is here, which you can check out. Now, all of this depth has been added by using the blurs only. So this is a two D vector layer. Simple as that.