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: