Value easing component which animates single values continuously

Usage no npm install needed!

<script type="module">
  import easeValue from 'https://cdn.skypack.dev/ease-value';



NPM version Build Status

Value easing component which animates single value continuously.

Unlike standard animations EaseValue doesn't have a duration or fixed "to" value and can have "to" value changing frequently, for example on mouse movement.


Install with npm:

$ npm install ease-value --save


import EaseValue from 'ease-value';

// Create animation with small 'force' value for smoother / slower animation
const mouseX = new EaseValue({'force': 0.1});
const mouseY = new EaseValue({'force': 0.1});

// On mouse movement update 'mouse' animation target value
document.addEventListener('mousemove', function (event) {
}, false);

// On animation step move demo box. Callback will be called twice per animation frame,
// once for mouseX and once for mouseY
mouseX.on('step', updateDemoBoxPosition);
mouseY.on('step', updateDemoBoxPosition);

function updateDemoBoxPosition (value) {
    document.querySelector('#demo-box').style.transform = `translate(${ mouseX.value }px, ${ mouseY.value }px)`;

To avoid callback being called more than once per animation frame we can use EaseValue.multiple(instances) and add listener to it instead.

import EaseValue from 'ease-value';

// Listen to all events 
const mouse  = EaseValue.multiple({
    'x': new EaseValue({'force': 0.1}),
    'y': new EaseValue({'force': 0.1})

// On mouse movement update 'mouse' animation target value
document.addEventListener('mousemove', function (event) {
        'x': event.clientX,
        'y': event.clientY

    // or you can access each EaseValue individually
}, false);

// On animation step move demo box
mouse.on('step', function (value) {
    document.querySelector('#demo-box').style.transform = `translate(${ value.x }px, ${ value.y }px)`;




Name Type Usage Default
force Number Amount of force used for animation / animation speed. Smaller the value, slower the animation will be 0.1
precision Number To prevent unneeded step event calls and to allow detecting animation end faster, animation value is rounded to this precision. For example with default precision, value between steps will not change by less than 0.01 0.01
easing String Easing name, currently there is easeOut and linear easings "easeOut"
value Number Initial value, optional. If initial value is not provided, then it will be set when calling to or reset for first time null

on(eventName, callback)

Adds event listener. To callback is passed current value as first argument.

Event names

Name Description
start Triggered when animation starts or when animation resumes after previously completing / stoping
stop Triggered when animation completes / stops
step Triggered on each animation step after value change, if value didn't changed between steps then 'step' callback won't be called

off(eventName, callback)

Removes event listener.


Set value to which animate to. Calling to for first time if value option was not provided is equivalent to calling reset


Set value without using animation, will instantly jump to this value.


Removes all listeners, stops animation

Running tests

Install dev dependencies:

$ npm install -d && npm test


Copyright © 2017, Kaspars Zuks. Released under the MIT license.