https://github.com/KevinGrajeda/tailwindcss-spring

A plugin for Tailwind CSS that adds spring animations using linear(), define just two parameters and let the plugin do the rest.
https://github.com/KevinGrajeda/tailwindcss-spring

animation bounce linear spring tailwind tailwindcss tailwindcss-plugin transition

Last synced: 20 days ago
JSON representation

A plugin for Tailwind CSS that adds spring animations using linear(), define just two parameters and let the plugin do the rest.

• Host: GitHub
• URL: https://github.com/KevinGrajeda/tailwindcss-spring
• Owner: KevinGrajeda
• License: mit
• Created: 2024-08-13T23:22:39.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-15T17:37:41.000Z (4 months ago)
• Last Synced: 2024-11-21T00:55:47.561Z (about 1 month ago)
• Topics: animation, bounce, linear, spring, tailwind, tailwindcss, tailwindcss-plugin, transition
• Language: TypeScript
• Homepage: https://tailwindcss-spring.kvin.me/
• Size: 159 KB
• Stars: 61
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwindcss-spring

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.

Check out the the plugin in action on [this website](https://tailwindcss-spring.kvin.me/).

## Parameters

- `spring-bounce-*`

- `spring-duration-*`

Example:

```html