spring
Barebones spring animation, based heavily on Rachel Smith's post, with some inspiration from Wobble and boing.js. This package uses ES6+ syntax, including class properties, you might want to run it through Babel first depending on your target browsers.
npm install @huth/spring
- Animate:
import Spring from "@huth/spring"
let spring = new Spring({
stiffness: 300,
damping: 70,
mass: 10,
delta: .01
})
spring.set(100)
spring.current // will now get the current value (in a RAF e.g.)
-
spring.set(value, fastForward = false)
updates the target value, optionally teleporting it -
spring.current
returns the current value, use in your own animation loops etc -
spring.stiffness = 300
updates thestiffness
property -
spring.damping = 70
updates thedamping
property -
spring.mass = 10
updates themass
property -
spring.delta = .01
updates thedelta
property; iftarget - current
is less than this than the spring is considered to have reach its target and will stop animating -- depending on the size of the values you are animating you might want to scale this up or down -
spring.running
returnstrue
if not at rest (do not update this manually) -
spring.velocity
returns current velocity (do not update this manually) -
spring.acceleration
returns current acceleration (do not update this manually) -
spring.target
returns current target value (do not update this manually) -
spring.stop()
kills the animation loop -
spring.start()
starts the animation loop if it is not already running -- you do not need to call this unless you have already stopped the animation manually