3.0.0 • Published 1 year ago
@huth/spring v3.0.0
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 itspring.current
returns the current value, use in your own animation loops etcspring.stiffness = 300
updates thestiffness
propertyspring.damping = 70
updates thedamping
propertyspring.mass = 10
updates themass
propertyspring.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 downspring.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 loopspring.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