Introduction to Easing in JavaScript | kirupa.com

programming
1

by kirupa | 7 June 2013

The most important part of creating an animation is specifying the rate at which a property value changes from one value to another. Does the value get there directly at a constant rate? Does the value speed up initially and then slow down? Does the value instead start slowly and then speed up? Is there a bounce at the end? The answers to all of these questions are important details that you specify, and it is these details that really give life to your animation. Basically, this is something you can't ignore.

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/introduction_to_easing_in_javascript.htm
2

Very good tutorial, as always :slight_smile:

I wonder if you can help me out with one thing ( I don’t want direct answer- just help :slight_smile:
I’m working on a simple script (just for training) - https://github.com/maciekgrzybek/awesome-num-animation
Script is animating numbers when the element appears on screen. I figured out pretty much everything. I’m just wondering how to apply easing function on it. If you’ll have a minute to take a look I would really appreciate it.

Cheers and have a good day mate! :slight_smile:

3

Hi Maciek!
Do you have a version of this that is running that I can look at. I downloaded your github contents and ran the HTML file. Nothing was showing up on screen :frowning:

Thanks,
Kirupa

4

Hello sir i want to learn css coding of this website please help me www.trycatchclasses.com.

5

Oh man, I thought I replied to you few days ago, but apparently the comment didn’t submit ;/

https://maciekgrzybek.github.io/awesome-num-animation/ . (need to scroll down to see the animation :slight_smile:
The css is poor but I want to work out the functionality first :slight_smile:
p.s. Thanks for reply :slight_smile: