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
    })

    Returns

    // 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
    ]

    Type Parameters

    Type Parameters

    • T

    Parameters

    • values: T[]

      Values to animate between, e.g. ["50px", 60]

      Note: You can interpolate with more than 2 values, but it's very confusing, so, it's best to choose 2

    • options: TypeEasings | TypeEasingOptions = {}

      Accepts EasingOptions or TypeEasingOptions.easing array frame functions

    • customInterpolate: TypeInterpolationFunction = interpolateComplex

    Returns readonly [any[], number]

Generated using TypeDoc