Skip to content

rolyatmax/spring-animator

Repository files navigation

spring-animator

stable

A little tool for easing values with spring forces for animations.

Here's an example.

Install

Use npm to install.

npm install spring-animator --save

Usage

import { createSpring } from 'spring-animator'

const stiffness = 0.003
const dampening = 0.1
const startingValue = 10

const spring = createSpring(stiffness, dampening, startingValue)

// must first set a new destination value to animate towards
spring.setDestination(15)

spring.tick() // takes one step towards destination value

// pass custom stiffness and dampening values for just this tick
spring.tick(0.003, 0.1)

const value = spring.getCurrentValue() // returns the current value

I personally like these values:

{
  stiffness: 0.003,
  dampening: 0.1
}

To run the example:

npm install
npm start

And then make sure to open example/index.html in a browser!

Or you can just try it out here.

NPM

License

MIT, see LICENSE.md for details.