@lorenzopalaia/tailwind-animations
v1.0.0
Published
Beautiful Tailwind animations for your app in seconds
Downloads
19
Maintainers
Readme
About The Project
Beautiful Tailwind animations for your app in seconds
Built With
Getting Started
Installation
Install NPM package:
npm install @lorenzopalaia/tailwind-animations
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - 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