TAOS

Tailwind CSS Animation on Scroll Library

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

Go to Examples Quick Start

slide

slide up

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

slide left

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

slide down

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

slide right

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

slide from left

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

slide from right

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

slide from top

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

slide from top left

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

slide from top right

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

grow

grow

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

grow from left

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

grow from right

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

grow from top

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

shrink

shrink

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

shrink from left

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

shrink from right

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

shrink from top

<div class="delay-[300ms] duration-[600ms] taos:[transform:translate3d(0,200px,0)_scale(1.2)] taos:opacity-0" 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>

Options

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>

Examples

3 delayed divs

3 offset divs

color property

Text color changes

border property

Frequently Asked Questions

Looking for more info? Here are some things we're commonly asked

Looking to build and ship Tailwind websites faster?

Versoly is a modular based visual development platform that leverages web development best practices with optional page builder + CMS for clients and team members to use.

  • 500+ pre-built components
  • Theme builder
  • VS code editor built-in
Start Building - Free