Springframes NPM

Springframes

A spring physics based keyframe generator to be used with Web Animation API. Fast and simple.

Install

Node: npm install springframes
UMD: https://unpkg.com/springframes@latest/lib/springframes.umd.js

Options

Property	Default	Required	Type	Details
`dx`	-	`true`	`number`	Displacement on X axis
`dy`	-	`true`	`number`	Displacement on Y axis
`deg`	`0`	`false`	`number`	Rotation (degrees)
`scale`	`1`	`false`	`number`	Scale (unstable)
`reverse`	`false`	`false`	`boolean`	Revert order of keyframes
`stiffness`	`500`	`false`	`number`	Spring stiffness
`damping`	`50`	`false`	`number`	Spring damping ratio
`mass`	`1`	`false`	`number`	Spring mass

Usage

Simply import createSpringAnimation function and pass it displacement on X axis and Y axis. Other options are not required as you can see from the table above. You will get an object with keyframes and frames properties: keyframes are what you pass to KeyframeEffect and frames are used to calculate duration.

import { createSpringAnimation } from "springframes";

const { keyframes, frames } = createSpringAnimation({
  dx: 500,
  dy: 500,
  stiffness: 700,
  mass: 2,
  damping: 10,
});

if (keyframes.length > 0) {
  const kfEffect = new KeyframeEffect(square, keyframes, {
    duration: (frames / 60) * 1000,
    fill: "both",
    easing: "linear", // This must be linear!
    iterations: 1,
  });

  animation = new Animation(kfEffect);

  animation.play();
}

You can play with it here: