Skip to content

Spring

module Spring
AssemblyPartas.Nacara.Plugins.Motion

Springs, solved the way anime.js 4.5.0 solves them, so that a spring written to CSS as linear() and the same spring run by the bundled anime.js settle alike.

Functions and values

forAnime (spring: SpringParameters) : SpringParameters

The spring rewritten for anime.js, which clamps mass to at least 1.

A mass below 1 is rescaled to mass 1 by dividing stiffness and damping by it, which keeps the natural frequency and damping ratio, so the motion is unchanged.

linear (spring: SpringParameters) : string

The spring as a CSS linear() easing of 32 samples over its settling time.

Each sample is rounded to 3 decimals. The first is 0 and the last is 1.

position (spring: SpringParameters) (seconds: float) : float

The position of the spring after seconds, from 0 at rest to 1 at the target.

This is anime.js's solve(t), which is itself 1 - displacement; a spring that overshoots exceeds 1.

preset (name: string) : SpringParameters option

The stand-in spring for one of Figma's named spring presets, or None for any other name.

Figma does not publish the parameters of GENTLE, QUICK, BOUNCY and SLOW; this is the one place that chooses them.

settle (spring: SpringParameters) : int

The milliseconds a spring takes to settle.

This is round(solverDuration * 1000), anime.js's settlingDuration.

solverDuration (spring: SpringParameters) : float

The seconds the solver runs before the spring has rested, as anime.js measures it.

It steps 0.02s at a time and stops on the 11th consecutive step within 0.0005 of the target.