Tweens / Easings about contributing HOT 4 CLOSED

I've been doing a bit of motion/easing stuff here and there:
https://www.npmjs.com/package/eases
https://www.npmjs.com/package/lerp
https://www.npmjs.com/package/lerp-array
https://www.npmjs.com/package/keyframes

I've also explored a pretty high-level tweening engine:
https://www.npmjs.com/package/tweenr

It has some useful bits under the hood (like matrix decompose / recompose for CSS transform tweening) so if you have suggestions on how to make the modules more generic and less tied to an "engine" I'd appreciate the feedback. 👍

EDIT: Also worth pointing out some GL specific modules.

https://www.npmjs.com/package/glsl-easings
https://www.npmjs.com/package/glsl-transition

from contributing.

glsl.io / glsl-transition / diaporama are actually all using https://github.com/gre/bezier-easing which implements the cubic-easing (like in CSS) in JavaScript

from contributing.

I also stuck on this issue some days ago. I needed to animate some objects from A to B and then to C. All solutions I found were to hard coupled to css or some other platforms, so I decided to make my own quick implementation. My stack consits of the following components:

• https://www.npmjs.com/package/ease Why? Be cause it consumes floats between 0 and 1 and returns a interpolated float between 0 and 1
• https://www.npmjs.com/package/d3-interpolate Creates a interpolator function based on two states. The interpolator expects a value between 0 and 1 and returns the interpolated object/array/string/number/whatever
• A simple timeline implementation

Usage example:

import {cubicIn} from 'ease';
import {array as createInterpolator} from 'd3-interpolate';

const A = [1, 2, 3]; // vec3
const B = [4, 5, 6]; // vec3
const C = [7, 8, 9]; // vec3
const interpolateA2B = createInterpolator(A, B);
const interpolateB2C = createInterpolator(B, C);

const animation = new Timeline()
    // add a handler for interpolate a point from A to B with duration of 200ms
    .addHandler(200, t => point = interpolateA2B(t))
    // adds a delay between handlers
    .delay(100)
    .addHandler(500, t => point = interpolateB2C(cubicIn(t)));

loop.on('tick', dt => {
    // increases a internal age and calls matching handler
    animation.tick(dt);

    // render your point
});

If there is any interest, I can open source the timeline module…

from contributing.

Going to recommend https://github.com/AndrewRayCode/easing-utils

Easing functions for Javascript that take a number from 0 to 1 and return the eased value

from contributing.