What aged in jQuery · 6 of 8

.animate() stopped at numbers

.animate() moves numbers. Modern interfaces move with transforms, rich easing and choreography — which is why GSAP sits on so many jQuery pages.

Why it made sense

Before CSS transitions existed, tweening left, top, width and opacity in JavaScript was the only cross-browser animation there was — and jQuery made it one line.

What changed

.animate() handles single numeric CSS values. Animating transform needs step-function workarounds; colours need the jQuery Color plugin; only swing and linear easing ship without jQuery UI. Sequencing runs through the fx queue (.queue(), .delay(), .stop()), which is hard to reason about once several elements are involved.

What jsKjs does instead

Motion animates x, y, rotate, scale and skew independently and composes them into one transform per frame, ships ten easings (or takes any function), staggers across collections, sequences with $.timeline(), and returns Promises. The classic .fadeIn()/.slideToggle()/.animate() calls still work, running on the new engine.

jQuery

JavaScript

$('.card').each(function (i) {
  $(this).delay(i * 80).animate({ opacity: 1, top: 0 }, 400, 'swing');
});

jsKjs

JavaScript

$.from('.card', { y: 24, opacity: 0, duration: .4, stagger: .08, ease: 'back.out' });