easing

Interpolation (easing) functions — 31 implementations of Robert Penner's equations.

Module easing | Source packages/front/fw/src/io/calc/easing.js | Deps none | Worker-safe yes

Resolve

const easing = runtime.resolve('easing');
// Returns: object with 31 easing functions

Common signature

All functions follow the Penner convention:

fn(t, b, c, d) → number

Available functions

Selection guide

Examples

const easing = runtime.resolve('easing');

// Interpolate from 0 to 300px over 60 frames
for (let t = 0; t <= 60; t++) {
    const x = easing.easeOutCubic(t, 0, 300, 60);
    el.style.transform = `translateX(${x}px)`;
}

// Usage with the animate module
const animate = runtime.resolve('animate');
animate(500, 'easeOutBounce', { init: 0, end: 100 }, (value) => {
    el.style.top = value + 'px';
});

Reference values — easeOutCubic(t, 0, 100, 10)

Worker Usage

const worker = fw.createWorker(
    function ({ libs, args }) {
        const easing = libs.easing;
        const frames = [];
        for (let t = 0; t <= args.duration; t++) {
            frames.push(easing.easeOutCubic(t, 0, args.range, args.duration));
        }
        self.postMessage(frames);
    },
    { dependencies: ['easing'], args: { duration: 60, range: 300 } }
);

Notes

• All functions follow the (t, b, c, d) signature (Robert Penner) — t can be a frame count or milliseconds depending on what d represents.
• Pure functions (no internal timers) — the animation must be driven by requestAnimationFrame or an external scheduler.
• easeInOutCubic is a good general choice; easeOutBounce and easeOutElastic are more expensive (conditional computations) but imperceptible at low frequency.

See also

• animate — uses easing with requestAnimationFrame