• Engine:
  • Properties:
  • Dots:
  • START
  • -- fps
  • HTML5 Animation Speed Test

    Compare the animation performance of jQuery, GSAP (GreenSock Animation Platform), anime, Web Animations (WAAPI), and CSS Transitions (which are what Zepto uses). Select the options above and click "START". Crank up the number of dots until you see jerky behavior or clumps/rings. Also notice which properties animate faster: "top", "left", "width" and "height" or "transform: translate(...) scale(...)". You may be surprised.

    If any animation completes more than 150ms later than it was supposed to, it will be logged and shown in orange text next to the START/STOP button along with the average amount of time they blew past their schedued end time. This is important because some engines may have an illusion of being smoother but in reality their internal timing mechanisms are drifting and everything is slowing down, thus there's less movement between each frame. For example, a tween that's supposed to take 750ms may actually end up taking 10,000ms to complete.