Tailwind CSS Animation on Scroll Library

A simple and small (600 bytes) library to help animate elements while scrolling using Tailwind CSS JIT + responsive utility classes.

fade

fade up

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

fade left

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

fade down

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

fade right

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

fade up left

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

fade up right

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

fade down left

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

fade down right

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

zoom

zoom in

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

zoom in up

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

zoom in down

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

zoom in left

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

zoom in right

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

zoom out

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

zoom out up

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

zoom out down

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

zoom out left

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

zoom out right

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

slide

slide up

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

slide left

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

slide down

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

slide right

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

flip

flip up

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

flip left

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

flip down

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

flip right

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

Example Settings

duration

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

delay

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

offset

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

easing

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

repeat

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

Looking for a Tailwind CSS website builder?

Versoly is a no-code/low-code platform that allows you to create and export Tailwind CSS code.

400+ people started a free trial in the last 30 days

Try without signing up

No coding required