-
Notifications
You must be signed in to change notification settings - Fork 20.6k
Description
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:
Using the RAF timestamp
argument instead, the animation feels smoother, and the graph is perfectly smooth as well:
I thought that perhaps using the microsecond-resolution performance.now()
function would improve smoothness, but it doesn't seem to help much: