Rive button Implementation in Webflow - JS Runtime

in the last video we created this hoverable button in Rive and today we're going to get it implemented in webflow so that it works on your website and is a clickable link just like this let's get started [Music] all right we've got our button set up and drive and if you remember last time we created the idle State and the hover state so we get this animation working we're going to need to set up an additional state or two to get the link to work so if we look over in this code sandbox example quickly we're going to need to create a state called link out and that's how a code knows that it's ready to go to a URL so in this example you can see when I click on this it's going to go the uh the URL doesn't actually load in code sandbox but that's going to go to google.com in a real example so we're going to get that set up in drive so that we can make this a functional button all right so to do that we're going to add a couple states to the state machine so let me pause this here and I'm going to add a timeline called link out you can call it whatever you want um this is just a an additional State and really this is all we need to do to make this work we just need this to come to this state when we click and when you're going to need to set that listener up first so uh let's do that we have our hover listener set up and you might remember we used a rectangle for that and the rectangle is basically a hit area and that is inside the bottom button group and if I hide the top button group again it's actually just this you know dark purple rectangle for the bottom button shape but it's always there and it doesn't scale or move or anything so that works really well for a hit Area mentioned the last video hit Area can be an invisible item as well so you can remove the fill from it and the stroke if you want to and it'll still function as a hit area but I want to use this rectangle again to set up a listener for pointer down so if I click plus here to add a new one I'm gonna I'm gonna call it click and we're also going to need to create a new input so we had one for hover we're going to create one for click as well in this case it's just going to be a trigger our Hover was a Boolean so you can kind of have it be true or false triggered just fires so we'll call this one click we'll call it click input just to differentiate between those two so on our click listener we've already got rectangle one set as the Target because we have it selected if you ever need to change the target click here and then choose a new Target we're going to leave it on rectangle one and instead of pointer enter we're going to change this to pointer down and in this case we're going to have click input go and you can see it just says fire click input because it is a trigger type so to get this to work we're going to add a condition so that hover doesn't just automatically play through to the link out stage because you'll see when I start the state machine it's going to go to idle and when I do hover you can see it it looks like it skips hover and goes right to link out and that's because if you don't give this any parameters it's just going to kind of whip through all the states that you have so you need to tell it you know how long to stay on each state or if there needs to be a condition to move to the next state and in this case we definitely want to condition we want to make sure that this click input is triggered before it goes to the link out stage in fact that's going to be the end of the chain because here is where your website is going to navigate to another page and this won't even be visible anymore so we're going to add a condition we're gonna have uh the click input uh fired here so let's uh restart our state machine we should be able to hover and you can see yeah it's not automatically preceding the link out because we didn't fire The Click trigger but if I do click here you'll see that it did jump over to the link out phase which is great I did notice one other thing I wanted to fix on this you might notice that if I unhovered a certain point you can see one of the birds is kind of peeking out uh here and even though I reset the position for each bird I also change the rotations quite a lot in the birds flying an animation and I think that is what is triggering this so I'm going to go back to my idol and I'm just going to key the rotation for each of the birds yep that's what I wanted to do all right so this file is actually ready to work we just need this link out state to be able to call in the code here to be able to make the link work we can also add one more step if you want a little animation set up to happen before your link that can just add a little bit of extra kind of fun to it so in this one you might notice there's a quick kind of scale down animation and then it goes to the link so to do that I'm going to add one more timeline and I'm going to call it free link now this is not going to be an animation Focus tutorial so I will time lapse this part okay with my animation set up I'm going to actually go ahead and shorten my artboard so that it doesn't play through the full second and go to 25 frames so I'm just going to type in 25 and hit enter it's going to shorten this timeline so that it only goes to that many frames and then I can just add that into my state machine so I'm going to have it go from hover to pre-link to link out in this case I want the hover to pre-link to have the click condition so I'm going to re-add that one here click input is going to be fired and then for pre-link to link out if I don't set any parameters here it's not even going to play this animation it'll just kind of continue on through to link out stage so what I'm going to do on this transition now is set the exit time to 100 percent and that means it needs to play 100 of this animation before going to the next one so let's preview this okay hover works when I click it plays the animation nice and quick and then it goes to the link out so it's not really going to delay the user too much um but it's going to add a little extra fun to the process one other quick thing I might do here is shrink down this artboard a little bit it's pretty big at this point I'm going to grab my art and move it up to the top left corner a little bit closer and I need to leave some room because the birds do kind of fly out into here so I need to leave that space and then on the artboard itself I'm going to shrink this down actually I think this worked well at 300 by 150. so then to check my animations to make sure they still fit make a couple of adjustments and then it's good to go so from here what I can do is the really easy method is just to grab the share link click generate link and then grab the embed code this is the easiest way to add arrive to a webflow project so if I add one here I've got this page set up with a iframe ready to go I can hit this hit save and close it's going to show up right here and this will even work when you go into the preview mode in webflow so the hover is going to work the click is going to work but it's not going to actually go anywhere on click so to get this working as a link we're going to need to use the JS runtime code so I've got the code set up here in a code sandbox and I can kind of walk through what this does one of the things you're going to see is that first you need to create a canvas element so that's here on the index I got canvas with an ID in this case the ID is Twitter button that's going to be important to use in the JS code I'm also setting the width and height here so here then we're going to add the button canvas so we're going to get it by element ID Twitter button so that you can see shows up here and here I also need to host my DOT Riv file so if I go back into arrive and click download there will be an option for your newest run time so you want to click that and save your file somewhere that you can find and then you need to upload it somewhere that you can host it I'm using upload care that's because you can't upload the dot Riv file into webflow right now so make sure you add your Source that's the URL for where you're hosting the button itself autoplay is true and then here's a couple other things we need to know from the file itself so you need to know the name of a state machine State machine one is the default State machine name when you create arrive file you get a state machine called State machine one if you don't change that you can use State machine one here if you do change it make sure you update here we're also going to need to know the name of this state so this is going to create an if statement that is going to say if the state is called link out then you know window location href equals Google so that's where you're going to set the link that you want your button to send you to so that's why we had to set this link out parameter in the state machine itself so that's why it's at the end of our chain of States because when it gets to that state it's going to this URL we also in this case I have it set up so that um the cursor turns into a pointer when you hover over it and it goes back to the default style when you are in the idle state so that is really helpful for making this look like an actual button so that you know this is going to turn into the little finger icon when you hover over it and turn back to your pointer if you don't add this part of the code that's not going to work it's just going to look like a pointer which I think could confuse your users so that's what that does and that is referencing the hover and idle States and this works well because of the way I have this state machine set up here so you'll notice um Idol is when it's not being hovered over and hover is when it is being hovered and it's only going to enter the hover State when the um input is triggered and the input is only triggered when The Listener is uh is used which only happens inside this rectangle space so it actually works really well as a kind of hit area for this trigger as well so that is what that is going to do so to get this all up and running we're going to use this code inside of webflow what we're going to do is copy everything from here and place this in this HTML embed instead of this I'm going to paste this first we're going to write script tag and this is where everything goes and like I said we need to have the canvas as well so I'm going to add canvas and I need to make sure to give it the ID as to be the same Twitter button and I'm going to set the width and height here you also need to copy this script and place it in the head tag you can come to rivflow.webflow.io and just go ahead and copy the snippet from here and then you paste it into the head code either for the entire site or just for the page that you have your animation on okay that should be what we need to get this working so let's save and close one thing about the using this JavaScript code is that you're gonna have to actually publish it to get it to work but I'm not ready to publish my sites quite yet but I'm using the same exact thing in this footer area it's this is set up as the functional button so it's going to actually link out as expected so let's examine this code inside my footer and you can see that it is the exact same thing except here I'm using a slightly different ID it is important to use a different ID with each canvas that you create because if you have the same one on the same page the the two instances will conflict and they won't work so just make sure you create a new unique ID here and use it in your code um do you think it's important to create as a new variable here so we're having we have let button canvas and then we also have a new variable Twitter button you have to make sure those are new for each instance that you create as well so once you publish that it's going to look and function exactly like this which means you've got a linkable button on your site using live super fun hope that's helpful and please reach out let me know if you have any questions this is an example of the site I'm building it's called riflow it's all about getting Rive functioning in webflow so please feel free to visit live dot webflow dot IO to come and check it out I will continue to add examples to it as we go and I have a couple of really good ones on here already including this cool pointer tracking one that works with tracking the pointer all throughout the viewport and includes your hover states that you may have set up got some instructions on how to do that I've got the code and this tutorial will be there as well hope that's helpful thank you foreign [Music]

Channel: Jeff McAvoy

Views: 1,695

Keywords:

Id: B-vER2XpPVQ

Length: 12min 57sec (777 seconds)

Published: Mon Feb 06 2023