Function SpringEasing

Generates an Array of values using frame functions which in turn create the effect of spring easing. To use this properly make sure to set the easing animation option to "linear". Check out a demo of SpringEasing at https://codepen.io/okikio/pen/MWEdzNg

SpringEasing has 3 properties they are easing (all the easings from EasingFunctions are supported on top of frame functions like SpringFrame, SpringFrameOut, etc..), numPoints (the size of the Array the frame function should create), and decimal (the number of decimal places of the values within said Array).

Properties	Default Value
easing	spring(1, 100, 10, 0)
numPoints	50
decimal	3

By default, Spring Easing support easings in the form,

constant	accelerate	decelerate	accelerate-decelerate	decelerate-accelerate
	spring / spring-in	spring-out	spring-in-out	spring-out-in

All Spring easing's can be configured using theses parameters,

spring-*(mass, stiffness, damping, velocity)

Each parameter comes with these defaults

Parameter	Default Value
mass	1
stiffness	100
damping	10
velocity	0

e.g.

import { SpringEasing, SpringOutFrame } from "spring-easing";
import anime from "animejs";

// Note: this is the return value of {@link SpringEasing} and {@link GenerateSpringFrames}, you don't need the object to get this format
let [translateX, duration] = SpringEasing([0, 250], {
    easing: "spring-out-in(1, 100, 10, 0)",

    // You can change the size of Array for the SpringEasing function to generate
    numPoints: 200,

    // The number of decimal places to round, final values in the generated Array
    // This option doesn't exist on {@link GenerateSpringFrames}
    decimal: 5,
});

anime({
  targets: "div",

  // Using spring easing animate from [0 to 250] using `spring-out-in`
  translateX,

  // You can set the easing without an object
  rotate: SpringEasing(["0turn", 1, 0, 0.5], [SpringOutFrame, 1, 100, 10, 0])[0],

  // TIP... Use linear easing for the proper effect
  easing: "linear",

  // The optimal duration for this specific spring
  duration
})
Copy

// An array of keyframes that represent said spring animation and
// Total duration (in milliseconds) required to create a smooth spring animation
[
  [50, 55, 60, 70, 80, ...], 
  3500 
]
Copy