Tailwind-Animations

About The Project

Beautiful Tailwind animations for your app in seconds

Built With

Getting Started

Installation

1. Install NPM package:

   npm install @lorenzopalaia/tailwind-animations
   

2. Add the plugin to your tailwind.config.js file:

   plugins: [
    require('@lorenzopalaia/tailwind-animations'),
    ...
   ]
   

Usage

Schema

Follow the schema animation-{name}, where:

• name is the pattern name

For example:

<div class="animate-rainbow-river">...</div>

Patterns

Here's the full list of available animations.

Gradients

Perfect for buttons, hover effects & adding a little magic. All gradients have a duration between 2s - 5s and can be customized to taste

rainbow-river, green-swoosh, fuzzy-dream, misty-fade, hazy-twist, mystic-aura, black-swoosh, tranquil-waters, diagonal-blaze, diagonal-ocean-wave, diagonal-purple-dream, diagonal-rotating-sun, diagonal-galaxy, purple-swoosh, blurred-swoosh, serene-sunset, vibrant-sun, shifting-triangles, mellow-embers, vertical-bliss, vertical-raindance, vertical-azure-wave, vertical-sunset-tide, vertical-golden-dream

Spaces

Perfect for full screen immersive experiences and backdrops (recommended viewing this on desktop)

blue-galaxy, gray-fluff, pastel-dream, amethyst-midnight, golden-horizon, rose-blush, lavender-dream, pink-blossom, cosmic-wave, glow-next-door, ski-haze

Classics

Perfect for fun & simple interactivity. Similar to animate-spin, animate-ping, animate-pulse, animate-bounce classes from Tailwind.

wobble, melt, float, breathe, squiggle, flip-and-spin, twist, pop, scatter, morphing-rectangle

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Lorenzo Palaia - [email protected]

Project Link: https://github.com/lorenzopalaia/Tailwind-Animations