Building Scroll-Triggered Animations in Tailwind CSS Without External Libraries

Scroll-based animations usually mean reaching for heavy libraries like GSAP or ScrollMagic. But with Tailwind CSS and the native IntersectionObserver API, you can create highly performant, elegant scroll-triggered animations — zero extra libraries required. Let's build a full setup. Why Native Scroll Animations? Benefits of ditching the big libraries: Smaller bundle size, faster load times Full control over when and how elements animate Progressive enhancement for older browsers Step 1: Build a Tailwind Animation Class First, extend Tailwind with a custom fade/slide animation: // tailwind.config.js module.exports = { theme: { extend: { keyframes: { fadeSlide: { '0%': { opacity: 0, transform: 'translateY(20px)' }, '100%': { opacity: 1, transform: 'translateY(0)' }, }, }, animation: { fadeSlide: 'fadeSlide 0.8s ease-out forwards', }, }, }, } Step 2: Setup HTML Markup Mark elements you want to animate with a hidden state: Reveal on Scroll This section will fade and slide into view. Initially, the item is invisible and shifted slightly down. Step 3: Use IntersectionObserver to Trigger Animation Here's the vanilla JS magic: const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.remove('opacity-0', 'translate-y-5'); entry.target.classList.add('animate-fadeSlide'); observer.unobserve(entry.target); } }); }, { threshold: 0.2, }); document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el)); Each element with data-animate will animate the first time it comes into view. Then we unobserve to avoid retriggering. Pros and Cons ✅ Pros Zero dependencies — full native performance Highly customizable with Tailwind’s animation system Accessibility-friendly (no reliance on JavaScript for critical content) ⚠️ Cons Requires small JS snippet per page (can't be pure CSS-only) Some older browsers (like IE11) don't support IntersectionObserver (polyfills needed if critical)

Apr 27, 2025 - 05:17

Building Scroll-Triggered Animations in Tailwind CSS Without External Libraries

Scroll-based animations usually mean reaching for heavy libraries like GSAP or ScrollMagic. But with Tailwind CSS and the native IntersectionObserver API, you can create highly performant, elegant scroll-triggered animations — zero extra libraries required. Let's build a full setup.

Why Native Scroll Animations?

Benefits of ditching the big libraries:

Smaller bundle size, faster load times
Full control over when and how elements animate
Progressive enhancement for older browsers

Step 1: Build a Tailwind Animation Class

First, extend Tailwind with a custom fade/slide animation:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        fadeSlide: {
          '0%': { opacity: 0, transform: 'translateY(20px)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        },
      },
      animation: {
        fadeSlide: 'fadeSlide 0.8s ease-out forwards',
      },
    },
  },
}

Step 2: Setup HTML Markup

Mark elements you want to animate with a hidden state:


  Reveal on Scroll
  This section will fade and slide into view.

Initially, the item is invisible and shifted slightly down.

Step 3: Use IntersectionObserver to Trigger Animation

Here's the vanilla JS magic:

Each element with data-animate will animate the first time it comes into view. Then we unobserve to avoid retriggering.

Pros and Cons

✅ Pros

Zero dependencies — full native performance
Highly customizable with Tailwind’s animation system
Accessibility-friendly (no reliance on JavaScript for critical content)

⚠️ Cons

Requires small JS snippet per page (can't be pure CSS-only)
Some older browsers (like IE11) don't support IntersectionObserver (polyfills needed if critical)