Back to Discover

Tailwind CSS Scrolling Animations

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>

<body class="bg-gray-50">
  <!-- Hero Section -->
  <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-700 text-white">
    <div class="text-center px-6">
      <h1 class="text-5xl md:text-7xl font-bold mb-6">Scroll Animations</h1>
      <p class="text-xl md:text-2xl text-blue-100 mb-8">Scroll down to see the magic</p>
      <ion-icon name="chevron-down-outline" class="text-5xl animate-bounce"></ion-icon>
    </div>
  </section>

  <!-- Fade In Animation -->
  <section class="min-h-screen flex items-center justify-center py-20 px-6">
    <div class="scroll-animate fade-up max-w-2xl">
      <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
        <ion-icon name="eye-outline" class="text-6xl text-blue-600 mb-4 block"></ion-icon>
        <h2 class="text-4xl font-bold text-gray-800 mb-4">Fade In</h2>
        <p class="text-lg text-gray-600">Elements smoothly fade in and slide up as they enter the viewport.</p>
      </div>
    </div>
  </section>

  <!-- Slide From Left -->
  <section class="min-h-screen flex items-center justify-center py-20 px-6 bg-gray-100">
    <div class="scroll-animate slide-left max-w-2xl">
      <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
        <ion-icon name="arrow-forward-outline" class="text-6xl text-purple-600 mb-4 block"></ion-icon>
        <h2 class="text-4xl font-bold text-gray-800 mb-4">Slide From Left</h2>
        <p class="text-lg text-gray-600">Content slides in smoothly from the left side of the screen.</p>
      </div>
    </div>
  </section>

  <!-- Slide From Right -->
  <section class="min-h-screen flex items-center justify-center py-20 px-6">
    <div class="scroll-animate slide-right max-w-2xl">
      <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
        <ion-icon name="arrow-back-outline" class="text-6xl text-indigo-600 mb-4 block"></ion-icon>
        <h2 class="text-4xl font-bold text-gray-800 mb-4">Slide From Right</h2>
        <p class="text-lg text-gray-600">Elements glide in from the right with smooth transitions.</p>
      </div>
    </div>
  </section>

  <!-- Scale Up Animation -->
  <section class="min-h-screen flex items-center justify-center py-20 px-6 bg-gray-100">
    <div class="scroll-animate scale max-w-2xl">
      <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
        <ion-icon name="expand-outline" class="text-6xl text-green-600 mb-4 block"></ion-icon>
        <h2 class="text-4xl font-bold text-gray-800 mb-4">Scale Up</h2>
        <p class="text-lg text-gray-600">Elements scale up from smaller size with fade effect.</p>
      </div>
    </div>
  </section>

  <!-- Staggered Grid -->
  <section class="min-h-screen flex items-center justify-center py-20 px-6">
    <div class="max-w-6xl w-full">
      <h2 class="text-4xl font-bold text-gray-800 mb-12 text-center">Staggered Grid</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="scroll-animate fade-up" style="transition-delay: 0ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-blue-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 1</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>

        <div class="scroll-animate fade-up" style="transition-delay: 100ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-purple-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 2</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>

        <div class="scroll-animate fade-up" style="transition-delay: 200ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-indigo-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 3</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>

        <div class="scroll-animate fade-up" style="transition-delay: 300ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-green-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 4</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>

        <div class="scroll-animate fade-up" style="transition-delay: 400ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-pink-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 5</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>

        <div class="scroll-animate fade-up" style="transition-delay: 500ms">
          <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
            <ion-icon name="cube-outline" class="text-5xl text-orange-600 mb-4 block"></ion-icon>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Feature 6</h3>
            <p class="text-gray-600">Each card animates in sequence.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Final Section -->
  <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-700 to-blue-600 text-white py-20 px-6">
    <div class="scroll-animate scale text-center">
      <ion-icon name="checkmark-circle-outline" class="text-8xl mb-6 block mx-auto"></ion-icon>
      <h2 class="text-5xl font-bold mb-4">Beautiful Animations</h2>
      <p class="text-xl text-purple-100">All powered by Tailwind CSS & Vanilla JS</p>
    </div>
  </section>

.scroll-animate {
  opacity: 0;
  transition: all 1s ease-out;
}

.scroll-animate.fade-up {
  transform: translateY(50px);
}

.scroll-animate.slide-left {
  transform: translateX(-100px);
}

.scroll-animate.slide-right {
  transform: translateX(100px);
}

.scroll-animate.scale {
  transform: scale(0.8);
}

.scroll-animate.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

function checkScroll() {
  const elements = document.querySelectorAll('.scroll-animate');
  const windowHeight = window.innerHeight;

  elements.forEach(element => {
    const elementTop = element.getBoundingClientRect().top;

    if (elementTop < windowHeight * 0.85) {
      element.classList.add('visible');
    }
  });
}

window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);

Comments (0)

No comments yet. Be the first!