A Tailwind CSS plugin that adds spring animations to your project using CSS linear(). Define just two parameters and let the plugin generate the easing curve and the animation duration.
npm install tailwindcss-springspring-bounce-*
spring-duration-*
html
`
Installation
Install the plugin via npm:
`bash
npm install tailwindcss-spring
`
Then, add the plugin to your tailwind.config.js file:
`javascript
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-spring"),
// ...
],
};
`
Usage
$3
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.
$3
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.