Animation Engine Timing Comparison

This test helps illuminate how an engine handles timing, frame drops, and synchronization. A very common technique is to check pending tweens on each tick, find any that should have started (and haven't yet), and fire 'em off starting "now". While that may help eliminate initial jumps caused by lags in the frame rate, it also prevents animations from staying in sync and can lead to clumping. GSAP, on the other hand, has always prioritized perfect synchronization and with the new lagSmoothing feature, it recovers from lags in the frame rate by adjusting a single value in the core timing mechanism (rather than shifting individual tweens independently).

The test below lets you to create a staggered animation in which the boxes fall linearly 300px and the staggering should be uniform across them all. If you see odd spacing/clumping, it means the relative timing of the tweens changed (lost sync). Add/reduce boxes change the stress level.

  • Boxes:
    stagger:
  • Engine:
    threshold:
    adjustedLag:
  • RUN TEST