Animated Number Counter with Framer Motion | Count Up Animation in React

hello everyone in this video we will create this reusable counter animation with frame motion and react this type of Animation can really enhance the storytelling of your website in cases if you need to show any numbers like total revenue number of positive reviews or finisher projects so without further Ado let's get started first things first dry principles are important to us so we will create a reusable function ality even for this simple animation we will build a reusable component called animated counter that will handle all the animation Logic for us so let's create a new file call it animated counter. TSX make sure we place it inside the app folder Now define the functional component animated counter and it will receive a few props such as from number to number and optional animation options that you can use to replace the default animation settings and since I'm using typescript let's define a prop types so as you see we P two numbers from and two and animation options which is an optional with type keepy frame options and our component will return a span element which is a self closing but why self closing we will discuss it the build later when we start building the animation Logic for our animation we will use an imperative approach to write the animation logic so we will need to attach a reference to our span element and perform the animation inside the use effect hook but since I'm in nexj Project which uses react Soro components I forgot to add use client directive at the top of the component to enable JavaScript events and to use react hooks hit save now let's import the user F hook and attach ref to our span element Now define the use layout effect hook or use isomorphic layout effect hook if you're in server s side rendering environment actually you can use a regular use effect hook but you might notice a slight layout shift during the first repaint because we don't pass any children to our span element so I suggest you to use use layout effect hook or use isomorphic layout effect hook for Server CER now let's define our element here which equals to R current value and don't forget to pass R to our dependencies array and for typescript first we check if there's no element we just return now let's start to define the animation itself so let's define controls variable which equals to animate function from frame or motion this function can animate our numbers by ping from to and animation options and let's define the duration which equals to 1 and half second and an e in function with esog value but if you want to paste your custom animation options with props you can paste it here with the spread operator and it will override the defaults and actually I forgot to set the initial value to our span element which is a from value and I will use a text content property with element. text content equals to from but we cannot assign the number to hm elements so let's convert it to stream let's go back to animate function and here with the on update method which accepts a value we need to continuously set a new number while animating from from number to two number so let's define element text content equals to Value which we need to convert to stren and let's import our component to our main page let's animate it from zero to 100 hit save you have noticed those weird numbers on the screen because the animate function animates our numbers and actually makes it FL not integers if I console log the value here you will see what happens hit save and here's what happens when animate function runs you see that all the numbers are flawed so let's use to fix it method to make them integers and we don't need the three method because to fix it returns a stream hit save again refresh I will zoom in a bit and hit refresh again so we're almost done with the animation and it works as expected however let's make sure we follow the best practices while using the animate function so let's stop the animation if the component on mounts using the return function controls stop additionally we can pass from and two numbers to our dependency 3 to reround the animation if these props changes also you can run this animation only when the component is in viewport we can do this with using view Hook from fare motion so let's define in view which equals to using view hook and we need to pass our ref and optionally if you need to fire the animation only once you can Define once and set it to True let's pass in view to our dependencies area and here if the component is not in view we just return hit save but you might have noticed that the numbers are jumping horizontally during the animation if I set the duration to let's say 10 seconds you see they are moving in the horizontal Direction you can fix it by using a monospace font with CSS with the element I can just Define font mono here hit save and it will definitely use a font let's check it again hit refresh and now as you see it stays in the center of the screen without those slight moves well everything works great and our animation is super performant but what if the user device settings enabled redu it motion with the current implementation we still render the counter animation as normal so if I go to settings and open up visual effects in Windows 11 and disable animation effects we still render our animation as normal make sure we respect the user reduced motion setting you can address it in two ways the first way is that we can check for the prefer reduced motion media query inside the user effect hook so you can type if window match media prefers reduced motion and it have a matches property which can be true if enabled and false of the device and if this setting is enabled we can just disable the en animation by setting element text content to the final number which is a two number and return to disable the execution of the following animate code hit save and let's remove the console log here so we don't need it hit refresh and as you see we have disabled the animation because I have disabled it in my system settings but if I enable it hit refresh our animation works again also you can use an alternative approach by leveraging a conditional rendering here you can create a custom react hook that returns whether the reduced motion is enabled and conditionally render the components for example you have created a react hook that returned the reduced motion as true let's commented here so if the reducing motion is true you can return a regular span element and pass a final number otherwise you return the animated counter hit refresh and when the reduced motion is true we just show the final number if the hook will return false we'll render the animation component feel free to choose your approach that fits your case better and that's it I think this is the most straightforward way to implement this animation now go forth and create some stunning cool effects for your website and if you found this video helpful please hit the like button button and subscribe to the channel your support helps me to stay motivated in the long run thanks for watching and see you in the next video

Channel: Vladyslav Dihtiarenko

Views: 3,856

Keywords: Animated Number Counter, Count Up Animation, Counter Up Animation, Animated counter, Number counting animation, Counter Up Number Animation, Framer Motion, React, Javascript, animated number counter react, React Animated Number Tutorial, How To Create Animated Numbers In React, animated count up react, web animations, react animated number counter

Id: Q78i8TRIxMk

Length: 9min 11sec (551 seconds)

Published: Thu May 02 2024