Integrating your RIVE Animations on the Web!

so last week i uploaded an awesome video tutorial teaching you live which is an awesome animation app and allows you to do crazy interactive animations and a lot of you said gary how do you use this on a website though this is worthless if you can't use it on the website well of course if you read the docs you can see that you can actually use it on a website so that's what i'm going to be showing you today so i'm going to be showing you how to do this so this little animation we created this in the first tutorial i'm going to link this video here as a card and also into the youtube description so watch that first if you want to learn how to actually structure this thing within rive then we're going to export it and use javascript to make it do this so upload file look at all this fancy stuff it's pretty simple example it'll come back down and resume so there's a lot of really cool things you can do with javascript to control all the different animation states so as always make sure to subscribe let's get started now wait one second we are getting involved with some javascript html and css in this video now if you're interested in that and you really want to level up as a front-end developer you should definitely check out the front-end developer career path at scrimba.com they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so click on the very top link here in the youtube description to get access to the front-end developer career path at scrimba.com all right so first we're going to check out the file that we're going to work with and basically it's exactly the same as before from the first tutorial again check it out if you want to follow that one thing i did change um select the artboard and get rid of the fill because we want the background to be transparent next up we're gonna switch to the animate section another change that i made um if we hit play and then i hit the trigger that we created it's going to go to fire up take off take off for three seconds and it's going to go automatically back down to fire down and back to idle so to make that change essentially the first thing i did is we um this connection between entry and idle i wanted idle to play automatically so i took off the condition of trigger two so you don't have to press trigger in order for it to get to idle the second and final change i made is this connection from take off to fire down uh basically we wait no because we want to click on come on gary here we got to figure this out where are we at oh yeah exit time three seconds that's the one we wanted to adjust sorry about that uh we want to specify uh three seconds and we remove the condition because uh for takeoff we we don't want to have to press a button in order for it to do that um so once you do that we just click here download for newest runtime version seven and it's going to say new file i've done this a bunch of times so i have a four iteration there you're going to want to open that up and change that name to we'll just call this rive.riv all right now next up i we're done here now we can go to visual studio code and what we'll do is um oh yeah by the way i've linked up a css file main.css it's empty we don't even have to use sas there's only a few rule sets that we'll use um and then we want to make sure we'll open up uh reveal and file explorer we'll get this right here we're going to drag this is on my other monitor so you can't see it this rive dot riv file rive.rive all right next up we're going to go back to this place which is the help.riveda app runtime's quickstart all right so for web react i mean you can use this for so many different things very flexible it's awesome we first want to add this script to the page so in this case we're going to come here we're just going to put at the very bottom we're going to just do javascript right in here so we'll open up the script tag and now we have everything ready to rock next up we're going to have a little bit of html very minimal as such container so i'm gonna have everything just holding um inside of a container we're gonna have um our canvas id so the way rive works is it places stuff inside of a canvas um so we'll put canvas um we'll put id equals canvas as well give it a name whatever you want i'm just going to put with um 700 and height 700. now this part is kind of important because the width and height that you give it will determine the resolution so if you try to make it larger um than what it should be then you'll see pixelation so this you know this part still you can do go full screen and it'll still be fine as long as you make it larger than this in this case we don't want a full screen it's just kind of like a that animation that's relatively small um so we're just putting it 700 500 by 500 work too so it's all up to you we're going to have a div class of content which just going to hold a single element of a button that goes nowhere and it's going to say by default upload now that's all we need for the well for for a little demo purpose i'm going to put a paragraph here it's going to be empty just to show that you can get some information about which step it's in in the state machine all right so let's go ahead and oh quickly refer to our css so i'm going to put i'm just going to paste this in because this is not a css tutorial the body element height 100 viewport height background color we're sending it to blue a display grid justify content center again we only have one element one child element which is the container element so justify content center that is going to center everything in the middle and then we're going to transfer the transition to background color eventually next up after that um we're going to have our canvas element now this is kind of silly i i should ju should have just adjusted the size of the canvas inside of rive to accommodate for this but i wanted to up higher so i did some adjustments here pointer events none so that our button will work which we'll get to in a second um we're going to take our content we're going to do text align center all right i and that just aligns that button text to the center and then we're going to have our a element right here and of course styling buttons there's always a lot of css but really there's nothing crazy happening just a transition on the background color here as well font family nunito make sure you import that at google fonts if you don't have it installed and obviously if this is a real project you'll always want to import the google fonts if you're going to use a non-system font but yeah that's it that's all the html is so at this point right click open with live server make sure you go to plugins and search for the live server plug-in if you don't have that installed already so let's open with live server and see what it looks like so far okay so this is what it looks like so far there's nothing here there should be a rocket right well no because we haven't added the javascript for that yet so all this information is coming from uh right here so we need to create the drive object right here so new dot write all right so let's paste that in i'll try to remember to link the documentation as well although you can find it yourself not a big deal and this is linking to something else on their server we want to just go to rive.riv all right what happens here will it work i have no clue okay it is actually working but not in the way we want because it's just kind of it's just choosing one of the random animations it's supposed to hover initially right so if we go back to our editor and we hit play we want this situation to occur so let's go ahead and work on that all right so referring back to my um document here there's a couple things i want to get access to um so what we'll do is create a const called btn for button so we're gonna get our button here document.queryselector a it's the only link we have on here so we can do that and then also we can take this off this one's going to be state name because we can get the state name as well query selector p for paragraph that's the empty paragraph all right so then what we'll do um under here we're going to specify an actual animation name so this is one of the ways that we can do this so we're going to put animations and if we refer back to our document here you can see we have a number of animations like take off and fire up fire down now the state machine right here these it's not necessarily an animation it's just a collection of those animations over here and we're kind of tying together them in an intelligent way with the state machine but you can't play individual animations so if we wanted to play um the take off animation for instance uh we just put in take off here and we'll see if that works so we go back to our document all right so does that take off i want to make sure that's actual takeoff let's do fire down [Music] there it goes so notice it just plays it once in this case because in drive the rive editor for the fire down and the fire up it's not set to loop the take off was set to loop if that makes sense all right so that's how you can do that you can play individual animations but we we don't want to do that we want to get access to the state machine itself so the way we'll do that is we're going to remove animations we're going to put state machines by the way this is all in the documentation we're going to put the name of the actual state machine in this case because i'm terrible i name it state machine one i just left it by the default that's what we want to put in so we're going to put state machine one now what happens if we just leave it at that all right what it's doing is it's playing that state machine it's going straight to the very first step which is idle and it's and it's looping it by default because that animation in rive is set to loop so if you go to idle see how it's set to loop there we go in the state machine it's the very first one we got the entry we go here straight to idle now how would you get it to fire up all right well we want it to fire up when we click on the upload button that's why we got access to this button right here so what we do is there's another step right here fit arrive fit to cover now this is coming straight from the documentation i forgot to look up exactly what that does but usually when you're using the state machines from all the examples i saw you put that there so now we're going to do on load all right so on load and this is all coming from the documentation we're going to do this if i can type correctly all right so what we'll do is const we're going to get all of the inputs by the way inputs if we go over here are these things these triggers i there you have three different trigger types you have let me click plus a number a bullion and a trigger um all this stuff's covered in the docs i'm not going to explain all of it but the trigger is basically just like a an action type where you can create a ternary operator to toggle back and forth and fire different states and make these things all play and there's obviously more intelligent ways to use the other ones so then we want to get access to like i said to trigger two so in order to do that we have to call and by the way we have to create a constant r equals then we can access it here r for rive is state machine uh inputs and we're gonna look for the same exact state machine name as defined above state machine one all right then we're going to create a um another trigger here i'm just going to call this trigger which is called lowercase trigger and we're going to say inputs which is define the line above find i equals i name and this is how we find our or specify which trigger name that we want to activate um that's gonna be trigger two as it's called again this is coming straight from the fact that just name trigger two here of course you can double click all this and give these much better names all right so after that now now we have that what we can do is we can specify btn.onclick now of course the btn is referenced to this upload button right here is going to be we're going to pass in the event by the way to uh stop it from scrolling above by putting in an e dot prevent default if we don't put this and there's the person scroll down a little bit and they click that button it automatically jumps them up and that's not fun um then what we're going to put is a trigger dot fire now let's see what happens here it may not work correctly in the way that we want it to let's try it out so it's refreshed click it oh yes we want to make sure we change this not to a capital c that stupid camel case is getting me so now if we click this there it goes now because of how we set up this state machine it's going to come back down and go back to this idle state now we're going to assume that you know a file is uploading in an ideal circumstance if a file was really uploading we would wait for a callback before we transition it back down into this idle state so it would be flying in the air while the file is uploading but because i'm not working in in such a scenario i only hard coded this rive editor to have a three second um situation where it's taking off if you wanted that to work in a real world con scenario what you would do is you would add another trigger called like file complete or something like that and then you would add it right here as a condition right here in this section and choose that second trigger then you would be able to use the javascript in the arrive section in order to fire that specific trigger when you receive the callback of your file upload uh library or whatever like that so i just wanted to explain that in case you weren't aware so we could do some other cool things as well we can actually for if we wanted to we could like i said output the state name that that the state machine is currently animating in so just to show you real quickly how to do that the code for this section is in the state machines under runtime for their documentation and it's going to be right here um we add on state chain change rather we pass in the event and then we put the enter in there so you'll see in a second once i add this real quickly what that looks like so on stage nope that's the wrong spot we're going to want to put that right there um [Music] get rid of that sorry about that i'm pasting stuff in here um so state name actually we're going to change this here yep state names the same thing internet html and this isn't styled so it doesn't look cool or whatever but um notice it's that idle it says it right down there idle so we click upload now it changes to fire up take off fire down and idle so if you ever wanted to have like a status indicator and you used good state name names or whatever it could actually be of help but really you wouldn't for the most part want to display this information you would want to use it in your code logic so for instance when we click upload now and we wanted to change this title for it for the the anchor text for instance from upload now to like uploading or something like that then that's how we can tie in with that so let's get rid of state name here we don't need it we can get rid of that and we'll get rid of this part so in order to do that what we can do is we can say and by the way just to show you event data zero all right so let's just hide that or comment that out what we can say is we can do if event dot data zero equals fire up or event data index 0 equals flying now remember if i come back to our editor um by the way it shouldn't be flying it should be take off sorry about that this should be take off right here um so we're saying if it's fire up and take off then we're going to change that um that anchor text to something else let me change that to take off that was a code error in my practice project so then what we can say is we can say button which we already already created above enter.html that allows us to change the anchor text of a button or a link um we'll just say uploading all right so let's check that out so we go back click it notice how it says uploading yet when it comes back down it's not going to change so we have to do a couple other things then we could say else else if let me just copy this real quick fire down we could say button.enter html equals finished all right so now click it it's uploading for three seconds finished and then we'll also want it to go back to that original button copy so one way we can do that just for this demo this will be about the last bit we're almost done set timeout let's use a timer here we can just say uh button.style or wait no button.enter.html equals upload file which is the original text um we can also do other stuff like uh for instance if we want if we wanted to change the um the buttons background color we can do that with vanilla javascript as well if we also wanted to change the body background color for whatever reason we can do that as well by changing this so now this should be the full effect here let's go ahead hit upload now uploading uploading uploading oh god that didn't work oh why because i'm slow there's a second parameter which is right there let's um try that again upload the background is not changing i think i left out a step for a second yes i did there was two lines that i want to add real quick which is right here there we go so we're changing it to a different color here the background to a lighter color and then this background button color right here that's why that was not working let's try that again i promise this time it's going to work there it goes me or maybe you make it completely black i wonder what that'll look like let's try it i'm zero zero zero it's probably gonna look like garbage maybe but maybe it'll look like space i don't know let's try it hey that's kind of cool maybe too dramatic of a change but nonetheless there you go awesome awesome stuff all right everybody hopefully you enjoyed that i'm personally going to be using live to make designcourse.com which is going to be releasing very soon here in january 4th 2022 uh to make it awesome there's so many really cool things that you can do to enhance the user experience with awesome interactive animations alright so as always make sure to sub up and i'll see you soon goodbye [Music] you

Channel: DesignCourse

Views: 12,482

Keywords: rive web, rive animations, rive tutorial, rive web sdk, rive web javascript, rive javascript, gary simon, designcourse

Id: WOOtILLrb0Q

Length: 21min 41sec (1301 seconds)

Published: Tue Nov 02 2021