lemonade-spring

lemonade-spring is a minimal function to create spring-physics based animations. The implementation is based on this tweet by Taylor Baldwin. It is written in ES6 and can be used directly in browsers supporting <script type="module">

Installation

npm install lemonade-spring

Usage

import createSpring from "lemonade-spring";

spring = createSpring(startValue, [options]);

• startValue — Can either be a number, an array (mutated) or an simple object with no nesting (mutated)
• options.mass — A number defining the mass of the spring. Default to 1
• options.stiffness — A number defining the stiffness of the spring. Default to 0.1
• options.damping — A number defining the damping of the spring. Default to 0.8
• options.precision - A number defining the interval size in which the animation will considered completed. Default to 0.01.
• options.onUpdate — A function that will be called after the update() call. Return the current value.
• options.onComplete — A function that will be called once the destValue is in range [destValue-precision, destValue+precision]

spring.target(destValue)

Set the destination value. Must be the same type|keys|length as startValue

spring.update()

Must be call in a requestAnimationFrame callback

spring.setValue()

Set the start value

spring.getValue()

Return the animated value

Examples

With a single number

let spring = createSpring(0); // start value

document.addEventListener("click", () => {
    spring.target(Math.random() * 100);
});

function loop() {
    requestAnimationFrame(loop);

    spring.update(); // call the .update() method in a requestAnimationFrame callback

    console.log(spring.getValue());
}

With an object (mutated)

let coords = { x: 0, y: 0 };
let spring = createSpring(coords, {
    mass: 1,
    stiffness: 0.2,
    damping: 0.5,
});

document.addEventListener("mousemove", function(event) {
    spring.target({ x: event.clientX, y: event.clientY });
});

function loop() {
    requestAnimationFrame(loop);

    spring.update(); // call the .update() method in a requestAnimationFrame callback

    console.log(coords.x, coords.y);
}

With an array (mutated)

let coords = [0, 0];
let spring = createSpring(coords, {
    mass: 1,
    stiffness: 0.2,
    damping: 0.5,
});

document.addEventListener("mousemove", function(event) {
    spring.target([ event.clientX, event.clientY ]);
});

function loop() {
    requestAnimationFrame(loop);

    spring.update(); // call the .update() method in a requestAnimationFrame callback

    console.log(coords[0], coords[1]);
}

License

MIT License, see LICENSE for details