DEV Community

Cover image for Building Scroll-Triggered Animations in Tailwind CSS Without External Libraries
HexShift
HexShift

Posted on

1

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:

<div class="opacity-0 translate-y-5 transition-all duration-700" data-animate>
  <h2 class="text-3xl font-bold">Reveal on Scroll</h2>
  <p>This section will fade and slide into view.</p>
</div>

Initially, the item is invisible and shifted slightly down.

Step 3: Use IntersectionObserver to Trigger Animation

Here's the vanilla JS magic:

<script>
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));
</script>

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)

🚀 Alternatives

  • Framer Motion + React: For app-level React animation control
  • Locomotive Scroll: If you want smooth scroll + parallax bundled together

Summary

Scroll-triggered animations don't need to bloat your app. With a pinch of Tailwind CSS and IntersectionObserver, you can deliver buttery-smooth, accessible motion experiences with minimal code — keeping your UI dynamic and your performance sharp.

If you found this useful, you can support me here: buymeacoffee.com/hexshift

Heroku

Tired of jumping between terminals, dashboards, and code?

Check out this demo showcasing how tools like Cursor can connect to Heroku through the MCP, letting you trigger actions like deployments, scaling, or provisioning—all without leaving your editor.

Learn More

Top comments (0)

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free