I am trying to understand the requestAnimationFrame api but I am not able to understand how repaint occurs during the process.

I would like to roll a JavaScript class for doing animations via window.requestAnimationFrame. Unfortunately, when I run my code, the Google Chrome Developer Tools throws this at me:

So I got a script from this link and it works perfectly, I would just like to make the animation slower. I’m not a javascript or jquery person, so help would be appreciated.

Here is a sample code, shown that mouseUp and mouseDown result in 2 different animation frames even when doing a simple click.