tailwindcss-spring

A Tailwind CSS plugin that adds spring easings using CSS linear() making it easy to incorporate spring animations into your project.

Define just two parameters and let the plugin do the rest.

Installation

Install the plugin

npm install tailwindcss-spring

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-spring'),
    // ...
  ],
}

Usage

spring-bounce-*

This class defines the bounce (as a percentage), generates the easing curve, and applies it to the transition-timing-function.

I recommend using low bounce values for most animations unless you want a springy effect.

spring-duration-*

This class defines the perceptual duration of the animation in milliseconds.

The perceptual duration allows you to intuitively configure the animation, focusing on the most significant part of the motion.

Since spring easings often have long settling periods, the perceptual duration isn't used as the actual animation duration. Instead, the real duration is calculated based on the spring-bounce-* value.

More info

This plugin was created by Kevin Grajeda. It's open source, available on GitHub.

You can also check out my CSS spring easing generator.

A special thanks to Jake Archibald for his work on the linear easing generator. I used some of his code for spring calculations.