How to make numbers count using Webflow interactions

what's up YouTube today we're going to play with numbers and webflow interactions so on this page you can see there's a lot of numbers changing as we interact with the page and all of these are made with webflow interactions but can we animate numbers like this using webflow interactions the answer is no but also yes so we can animate variables with webflow interactions and with just a little snippet we can turn those variables into values that we actually see on the page today I'm going to show you free interactions we're going to do this mouse movement interaction where you can see the coordinates of the cursor on the map we're going to see this scrolling progress interaction that will show how far you scroll down on the page and we're going to see how to do this loading animation that's just counting up to 100 so let's get to it here I've set up the project and we have all of the lens that we need but none of them have been made animated or interactive yet so that's what we're going to do now the first step is to head over to the lazy guard.com that's where you can get all of these Snippets this one is called count the first thing that we need to do is to copy the snippet and paste it on the page this the code is hosted on GitHub and this open source you can check that out if you want to but for now I'm just going to paste it here in the project settings okay that was the first step so the second step is that we want to add the attribute to the text elements that we want to have the numbers this can either be a full text element or a span within the text element so here I'm just going to copy the attribute and let's make this uh the first number so I'm going to create a span here and this is what we're going to give the um custom attribute here I make the value number one because it's the first number that we have let's make this the second number and again we repeat for number two after that the second step is to create a variable for each number so these variables are what we're going to use to change the values so we're going to open the variable panel and create a new variable with type size and paste in the name so that's the first one type size and the second one so now that's done that was step two step three is to create the native workflow interactions that we want to animate here what I I want on this world map rabber I want to make a mouse move over element interaction if we go over here we want to create a new one we make a new interaction okay so the x axis was the first number that I ID identified so in this mouse X I'm going to create a interaction that animates the variable value and that should change the count one number and over here also the count one number and I want it to go to to 100 at 0% it will be zero and 100 it will be 100 so that makes sense and we're going to do the same exact thing down here in the Y AIS just for number two instead yeah now we can actually just preview okay so we can see that as we're moving the cursor the numbers are indeed changing it's a bit different than the one I showed you before because this one doesn't have decimals if we want to do that we can um just head back to the lazy Guard website and we can add this optional attribute we can use to define how many decimals so let's select the number here and add a new attribute and let's put two decimals and on this other number let's also just put two decimals let's just publish to quickly preview that okay yeah so now we have the decimals and it's a bit more accurate okay that was actually just the first interaction for the next one I'm going to do the page scrolling interaction so again we want to create a span here we want to give it the custom attribute till G Count this one I guess will be the number three okay and we also need to create the variable a new variable with type size this one will be count fre as well and then we go to the interaction panel and make a page interaction of while page is scrolling you make a new one this one we're going to call scroll and again we want to animate a variable this time we want to animate the number three variable let's make it go to 100 no actually let's go make it go to 1 million because that's a bit more than 100 and now we can just publish and preview how it looks okay so we can see here now that we're scrolling the number is indeed counting up a lot we don't have the visual in indicator I'm just going to add that in a second and another thing we notice is that it's a bit hard to read this number we don't have a thousand separator so we're also going to add that we have another optional attribute for that so if we scroll a bit down we can set a custom thousand separator going to copy this attribute go back to webflow add it here and I'm going to use a comma here for the Thousand separator let's also just make the interaction a bit nicer by animating this scrolling progress this we're going to change the width from 0% let's publish and preview once more okay so now we have the F separator it's way easier to read and we can see the visual feedback of this so that's cool now let's add the final interaction for this last interaction I already prepared the rber that I need so this one has the number inside it has this relative box so we can also animate this progress indicator that changes the color I'll share the clonable linked below so you can see exactly how we did this again we want to repeat the first steps for the number we want to add the attribute this one I guess is number four and we want to go to the variable panel and add the variable and then we want to create a new interaction we want to create a page load interaction action this one we'll call load I want to make the load rber start out with flex as the initial State the second thing I want to change the count 4 to have that initial State as zero as well I want to duplicate this and that's the progress bar so I want that to go up to 100 then let's also just animate the loading progress while we add it so this one we want to change the size I want it to go up to 100% so we can see here so it moves up yes these two should move together so we put them together we also want the load rber to disappear so we're going to add a move interaction want that to happen after the number is counted up you may have noticed that the this box like doesn't really work exactly how we wanted to so let's just fix that quickly so this has to do with the CSS transform style I'm just going to going to do it like this so it's fixed and we can see now that it still still works out we move it out of view and then just for good behavior we're going to also set the loader R to none so it's all the way out and we can just preview it here play it like okay that's way too fast so I for sure want this to take a bit longer I'm 1.2 seconds and let's try and ease in out here okay yeah let's just go with that for now and then I'm just going to hide the loader rber here on the page so we can still see the things that we would be working on let's publish and preview okay yeah okay so a few things happened here we have the loader but it's a bit annoying that the one causes the number to to shift I I would rather have all three numbers show so we have another attribute to just for that so we have this optional attribute called minimum number of digits let's copy that just find here the the number that we want to add it to we can say we want that to always always be minimum of three digits so it's just going to put zeros and let's publish again ah yes that's way better okay and that actually concludes this video we have three interactions that are manipulating numbers and I'm sure you can do a lot of cooler things with this so um if you liked it make sure to leave a like And subscribe if you want to see more stuff like this we're going to do a lot of cool things together so um I'll see you in the next one

Channel: thelazygod

Views: 573

Keywords: Webflow, Interactions, video, animation, Open source

Id: fRNQXgydupo

Length: 9min 31sec (571 seconds)

Published: Thu Mar 14 2024