TAOS
Tailwind CSS Animation on Scroll - A simple and small (600 bytes) library to help animate elements while scrolling using responsive Tailwind CSS utility classes. React & Vue supported.
------
[](https://versoly.com/tailwind-page-builder?utm_source=github&utm_medium=repo&utm_campaign=image&utm_term=taos)
------
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Demo](#demo)
- [Getting started](#getting-started)
- [Installation](#installation)
- [Add JavaScript scripts](#add-javascript-scripts)
- [TAOS Frequently Asked Questions](#taos-frequently-asked-questions)
- [JS Frameworks](#js-frameworks)
- [Inspiration](#inspiration)
- [Community](#community)
## Demo
To view 20+ examples of TAOS in action go to [versoly.com/taos](https://versoly.com/taos).
## Getting started
TAOS can be included as a plugin into an existing Tailwind CSS project and will allow you to add responsive Tailwind CSS utility classes for animation on scroll.
### Installation
Install the plugin from npm:
```shell
npm install taos --save
```
Then add to your main `style.css` file:
```css
@custom-variant taos (&.taos-init:where(:not(.taos-animate)));
html.js :where([class*="taos:"]:not(.taos-init)) {
visibility: hidden;
}
@source inline('!duration-[0ms] !delay-[0ms]');
```
If you are still using **Tailwind CSS v3**, add the plugin and safelist classes to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
// ...
require('taos/plugin'),
],
safelist: [
'!duration-[0ms]',
'!delay-[0ms]',
'html.js :where([class*="taos:"]:not(.taos-init))',
]
}
```
### Add JavaScript scripts
Add the CDN script or download and paste before the closing `