TAOS

https://versoly.com/taos
Admin
TAOS is a simple and small (600bytes) library to help animate elements while scrolling using...
Tokens:1,582
Snippets:11
Trust Score:8.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Grow Animations

Source: https://versoly.com/taos

Examples of scaling elements up from different origins.

```html
<div class="delay-[300ms] duration-[600ms] taos:scale-[0.6] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(-200px,0,0)_scale(0.6)] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(200px,0,0)_scale(0.6)] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(0,200px,0)_scale(0.6)] taos:opacity-0" data-taos-offset="400"><div>
```

--------------------------------

### Animation Options

Source: https://versoly.com/taos

Configuration examples for duration, delay, offset, easing, and repetition.

```html
<div class="duration-[1000ms] taos:opacity-0"><div>
```

```html
<div class="delay-[500ms] duration-[1000ms] taos:opacity-0"><div>
```

```html
<div class="duration-[1000ms] taos:opacity-0" data-taos-offset="300"><div>
```

```html
<div class="duration-[1000ms] ease-[cubic-bezier(.47,0,.745,.715)] taos:opacity-0"><div>
```

```html
<div class="duration-[1000ms] [animation-iteration-count:infinite] taos:opacity-0"><div>
```

--------------------------------

### Flip Animations

Source: https://versoly.com/taos

Examples of 3D perspective flip animations.

```html
<div class="duration-[300ms] taos:[transform:perspective(2500px)_rotateX(-100deg)] taos:invisible taos:[backface-visibility:hidden]" data-taos-offset="400"><div>
```

```html
<div class="duration-[300ms] taos:[transform:perspective(2500px)_rotateY(-100deg)] taos:invisible taos:[backface-visibility:hidden]" data-taos-offset="400"><div>
```

```html
<div class="duration-[300ms] taos:[transform:perspective(2500px)_rotateX(100deg)] taos:invisible taos:[backface-visibility:hidden]" data-taos-offset="500"><div>
```

```html
<div class="duration-[300ms] taos:[transform:perspective(2500px)_rotateY(100deg)] taos:invisible taos:[backface-visibility:hidden]" data-taos-offset="400"><div>
```

--------------------------------

### Shrink Animations

Source: https://versoly.com/taos

Examples of scaling elements down from different origins.

```html
<div class="delay-[300ms] duration-[600ms] taos:scale-[1.2] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(-200px,0,0)_scale(1.2)] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(200px,0,0)_scale(1.2)] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(0,200px,0)_scale(1.2)] taos:opacity-0" data-taos-offset="400"><div>
```

--------------------------------

### Slide Animations

Source: https://versoly.com/taos

Examples of sliding elements into view using various directions and offsets.

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-y-[100%] taos:opacity-0" data-taos-offset="300"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-x-[100%] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-y-[-100%] taos:opacity-0" data-taos-offset="500"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-x-[-100%] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-x-[-200px] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-x-[200px] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:translate-y-[200px] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(-200px,200px,0)] taos:opacity-0" data-taos-offset="400"><div>
```

```html
<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(200px,200px,0)] taos:opacity-0" data-taos-offset="400"><div>
```
Tokens:
Raw