How to use

Spring easings are typically configured with several parameters (mass, stiffness, damping, and velocity). This tool is designed to make generating spring easings more intuitive.

In this article, I explain why I use Perceptual Duration and Bounce.

Presets

This tool comes with three presets: smooth, snappy, and bouncy. These are based on apple defaults and are a good starting point for most use cases.

Inputs

1. Perceptual Duration

Unlike normal easings, spring easings (due to the nature of springs) do not have a defined end. This tool uses perceptual duration to make configuring the easing easier and more predictable.

This perceptual duration should not be used as the animation duration in CSS. Instead, the tool generates a Spring Duration.

2. Bounce

This parameter controls how much the spring should bounce, with 0% being no bounce and 100% being infinite bounce. It is generally recommended to keep this value low in most animations.

Outputs

1. Spring Easing

This output contains the code for applying the easing in CSS, either for transition-timing-function or animation-timing-function. It uses linear().

2. Spring Duration

This is the value that should be used as the duration when applying the easing. It is always greater than the perceptual duration because it represents the time it takes for the spring to settle.