Skip to content

Use RAF's timestamp for smoother animations #3143

@joliss

Description

@joliss

jQuery 3.0.0-rc1 uses requestAnimationFrame, resulting in significantly smoother animations compared to before. However, its tweening logic uses Date.now() instead of the RAF timestamp argument. As a result, the animation is still slightly choppy.

Before you switch to using timestamp, I should point out that the Velocity.js library opts not to use timestamp (velocity.js:3366):

/* We ignore RAF's high resolution timestamp since it can be significantly offset
   when the browser is
   under high stress; we opt for choppiness over allowing the browser to drop huge
   chunks of frames. */
var timeCurrent = (new Date).getTime();

I don't know if this is actually still an issue in modern browsers. @julianshapiro originally wrote this code in 2014 -- perhaps he can chime in with some details.

I created a test case to demonstrate choppiness resulting from not using timestamp: https://codepen.io/joliss/pen/wWKGeV/ (The test case uses Velocity.js, but I believe it's the same for jQuery.)

My hope is that you can use this test case as a debugging aid, and as a motivating example to convince browser vendors to get any remaining timestamp issues resolved.

Running the CodePen, we see that there is some slight choppiness with the jQuery's getTime implementation:

a pen by jo liss jtbyc

Using the RAF timestamp argument instead, the animation feels smoother, and the graph is perfectly smooth as well:

a pen by jo liss her4j

I thought that perhaps using the microsecond-resolution performance.now() function would improve smoothness, but it doesn't seem to help much:

a pen by jo liss hft9a

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions