Create a dynamic numerical effect with pure JavaScript

Tram Ho

In the previous two sections, we went together to make an example of creating an increasing numerical effect that often appears on Landing Page pages. The final result is quite complete, we learn a new brand – requestAnimationFrame() in Javascript, as well as using the method of calculating numerical values ​​based on time, …

Motion function of animation

First of all, I would like to bring back the example CodePen – our final result in the previous section:

If you look closely, the increasing effect of the above figures looks a bit … boring. In the end, what are we missing?

In my opinion, it is because the value of the numbers is currently increasing steadily with the value of time. In other words, our effects are running at a linear speed – not changing over time.

No object in nature moves at the same velocity with the 45-degree angular graph shown above. No wonder something was wrong.

If you have ever used CSS3 animation with transitions, then you will know that there are many different types of motion functions to choose from: linear, ease (slow – fast – slow), ease-in (slow start), ease -out (slow ending), …

css3 animation timing function

At, there are many motion functions that I can apply to the effects in my example. I will try to get the easeOutExpo function to use. Remember that ease-out functions have a quick start, but at the end the movement slows down.

This function takes an argument that the value of x is the time scale (in the range of 0 to 1), and will return the ratio of the distance between 0 and 1.

Now I will add the above function to our animation calculation function:

The change from my previous post is as follows:

The result is here (press the 0.5x button for a more panoramic view). Now you can see that the slower the numbers move towards the end, the more natural it looks.

More advanced, you can learn and apply bezier curve functions to effects, used by most of the motion functions in CSS3. There is a great article (in Vietnamese) about the bezier curve in CSS3 animation here that you should read.

Illustration bezier curve


Share the news now

Source : Viblo