# Introduction to Easing in JavaScript | kirupa.com

**URL:** <https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204>\
**Category:** programming\
**Created:** [November 23, 2014, 1:51am UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204 "2014-11-23T01:51:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 1:51am UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204/1 "2014-11-23T01:51:43Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/introduction_to_easing_in_javascript.htm)

---

<div class="post-metadata">

**Author:** ![maciek-g](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@maciek-g](https://forum.kirupa.com/u/maciek-g)\
**Post date:** [May 18, 2017, 1:28pm UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204/2 "2017-05-18T13:28:12Z")

</div>

Very good tutorial, as always 🙂

I wonder if you can help me out with one thing ( I don’t want direct answer- just help 🙂  
I’m working on a simple script (just for training) - [https://github.com/maciekgrzybek/awesome-num-animation](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! 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 19, 2017, 11:05am UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204/3 "2017-05-19T11:05:38Z")

</div>

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 ☹

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![raj2](https://avatars.discourse-cdn.com/v4/letter/r/74df32/32.png) [@raj2](https://forum.kirupa.com/u/raj2)\
**Post date:** [June 1, 2017, 5:51am UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204/4 "2017-06-01T05:51:30Z")

</div>

Hello sir i want to learn css coding of this website please help me [www.trycatchclasses.com](http://www.trycatchclasses.com).

---

<div class="post-metadata">

**Author:** ![maciek-g](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@maciek-g](https://forum.kirupa.com/u/maciek-g)\
**Post date:** [June 1, 2017, 4:30pm UTC](https://forum.kirupa.com/t/introduction-to-easing-in-javascript-kirupa-com/352204/5 "2017-06-01T16:30:28Z")

</div>

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/](https://maciekgrzybek.github.io/awesome-num-animation/) . (need to scroll down to see the animation 🙂  
The css is poor but I want to work out the functionality first 🙂  
p.s. Thanks for reply 🙂