jsKjs Get jsKjs

Motion · GSAP-style

Easings

Easing is the personality of motion. Here is every built-in curve, plotted from the real functions in $.easings — click one to feel it.

An easing maps progress t (0 → 1) to output (usually 0 → 1). back.out overshoots then settles; elastic.out wobbles; bounce.out bounces; the power2 family accelerates or decelerates smoothly. Pass a name, or any function: ease: t => t * t * (3 - 2 * t).

Rules of thumb: use …out curves for things entering (they arrive gently), …in for things leaving, and save elastic and bounce for moments of delight, not navigation.

Live · Easing gallery

Choose an easing.

View the source for this demo
HTML
<div class="track" aria-hidden="true"><div id="eg-runner"></div></div>
<p class="muted" id="eg-now" aria-live="polite" style="margin:0 0 12px;font-size:14px">Choose an easing.</p>
<div class="eg" id="eg"></div>
JavaScript
const W = 120, H = 66;
const curve = fn => {
  const pts = [];
  for (let i = 0; i <= 48; i++) {
    const t = i / 48;
    pts.push((t * W).toFixed(1) + ',' + (H - 10 - fn(t) * (H - 22)).toFixed(1));
  }
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" aria-hidden="true"><line class="base" x1="0" y1="' + (H - 10) + '" x2="' + W + '" y2="' + (H - 10) + '"/><polyline points="' + pts.join(' ') + '"/></svg>';
};

async function play(name, ease) {
  $('#eg-now').text('Playing ' + name);
  const distance = $('.track').width() - 46;
  await $.to('#eg-runner', { x: distance, duration: .9, ease });
  await $.to('#eg-runner', { x: 0, duration: .45, ease: 'power2.inOut' });
}

$.each($.easings, (name, fn) => {
  $('<button type="button" class="eg-card">').html(curve(fn) + '<span>' + name + '</span>')
    .on('click', () => play(name, name)).appendTo('#eg');
});

const smoothstep = t => t * t * (3 - 2 * t);           // any function works
$('<button type="button" class="eg-card">').html(curve(smoothstep) + '<span>custom: smoothstep</span>')
  .on('click', () => play('custom smoothstep', smoothstep)).appendTo('#eg');

More examples

Named or custom

JavaScript
$.to('.drawer', { x: 0, ease: 'power2.out' });
$.to('.ball', { y: 300, ease: 'bounce.out', duration: 1 });
$.to('.dot', { x: 100, ease: t => 1 - Math.cos(t * Math.PI / 2) });   // sine.in
$.easings['back.out'](0.5);                                             // use them anywhere

API

ease: name | (t) => number

Built in: linear, ease-in, ease-out, ease-in-out, power2.in, power2.out, power2.inOut, back.out, elastic.out, bounce.out — exposed as $.easings — or pass any function mapping 0→1 progress.

Reference: Easings →

Migrating

Coming from GSAPNames follow GSAP's style. Included: power2 in/out/inOut, back.out, elastic.out, bounce.out, plus CSS-style names. Other families (sine, expo, circ, steps(), CustomEase) can be passed as functions.

Related features

Motion

Tweens

Animate any numeric CSS property and transforms (x, y, rotate, scale) with $.to().

Open →Motion

Stagger

Offset each element's start with the stagger option for cascades, or compute per-element delays for ripple and grid waves from any point.

Open →Motion

Transforms

Animate x, y, rotate, scale, scaleX, scaleY, skewX and skewY independently — jsKjs composes them into one transform per frame.

Open →