{"repo":"midudev/tailwind-animations","free":true,"listed":false,"github":"https://github.com/midudev/tailwind-animations","clone":"git clone https://github.com/midudev/tailwind-animations.git","description":"Easy peasy animations for your Tailwind project","language":"Astro","stars":1523,"topics":["animations","css3","css3-animations","tailwind","tailwindcss","scroll-animations"],"license":"MIT","category":"ui-components","readme_excerpt":"Awesome Tailwind Animations Get your animations easily done with only Tailwind CSS classes. Visit the website or the playground to get more information. Installation :book: Package install Install the package with your favorite package manager: - npm - pnpm - yarn Agent skill (skills.sh) Give coding agents a consumer-focused skill for this package: Browse: skills.sh/midudev/tailwind-animations Plugin Implementation Use the plugin in your Tailwind CSS project: Usage :gear: Example Here are some simple examples of how to use this plugin and its animations: Scroll mask (fade overflow edges) Fade the edges of a scroll container based on scroll position — pure CSS ( animation-timeline: scroll() + mask-image ), no JavaScript. Also: scroll-mask (all four edges), scroll-mask-t b l r , and scroll-mask- -from- . Requires browser support for animation-timeline: scroll() . Animates Timeline This plugin also brings a utility class to animate elements based on their position in the window. You can use the class view-animate-single or view-animate-[animation] to generate any name for your timeline. Contributors 👑 Credits - scroll-mask utilities inspired by Tim Wilson’s scroll-mask.","default_branch":null,"files":null,"tree":[],"storefront":"/r/midudev","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/midudev/tailwind-animations/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}