animated-tailwindcss
tailwindcss-animate.css
Our great sponsors
animated-tailwindcss | tailwindcss-animate.css | |
---|---|---|
3 | 2 | |
151 | 127 | |
0.0% | - | |
2.6 | 4.4 | |
about 2 months ago | 4 months ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
animated-tailwindcss
-
Using Animate.css with Tailwind CSS
I am excited that recently I released its version 3 that is fully compatible with Tailwind CSS v3. One can read the docs here. The package provides utilities to customize all the animation-related properties. Most of the utilities support arbitrary values too. I have also added all the CSS-compatible animation timing functions there are at easings.net. For some animations, you can also customize their translating distance (for example, in case you want subtle entrance/exit). The package is open-source and MIT licensed (GitHub). Please try using the configuration. Any feedback is much appreciated.
-
Animate.css with Tailwind CSS
Please give the configuration a try. If you feel that something went wrong, please comment and/or create an issue on GitHub. I am working on adding options to customize animation duration, delay, etc. These will be available soon!
tailwindcss-animate.css
-
Using Animate.css with Tailwind CSS
So, I thought of writing some plugin-like stuff that adds Animate.css animations and the necessary animation utilities to make things easier. There wasn't any specific reason to choose Animate.css over other libraries. It was just a thought that let's start with the most popular one, then add the others later. Firstly I started searching if any similar package exists or not. There is tailwindcss-animatecss but it requires way too much configuration for JIT mode. There wasn't much activity on its repository, so instead of contributing to it, I started working on a package of my own - animated-tailwindcss.
-
Animate.css with Tailwind CSS
The question will probably make you search for some plugin, and the first one on the list will be tailwindcss-animatecss. It is a great plugin in itself, except it requires quite a configuration. Although its adjustable (optional) settings are pretty nice, but setting the variants and required classes seems overkill in the new JIT mode.
What are some alternatives?
Reactive Resume - A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today! [Moved to: https://github.com/AmruthPillai/Reactive-Resume]
nightwind - An automatic, customisable, overridable Tailwind dark mode plugin
react-simple-animate - 🎯 React UI animation made easy
config - Configuration module for Nest framework (node.js) 🍓
Tailwind CSS - A utility-first CSS framework for rapid UI development.
tailwind-safelist-generator - Tailwind plugin to generate purge-safe.txt files
easings.net - Easing Functions Cheat Sheet
VSpaceCode - Spacemacs like keybindings for Visual Studio Code
Reactive-Resume - A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
animate.css - 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
alpine-intersect-animate - An Alpine.js plugin to animate DOM once it shows up on the viewport