Javascript Text Animation on Scroll

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/collection/components/icon/icon.min.css">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>

<div class="hero">
  <h1>Scroll Animation Demo</h1>
  <p>Scroll down to see beautiful text animations</p>
  <div class="scroll-indicator">
    <ion-icon name="chevron-down-outline" style="font-size: 2rem; color: white;"></ion-icon>
  </div>
</div>

<div class="content-section">
  <div class="container">
    <div class="text-block animate-text">
      <h2>
        <ion-icon name="rocket-outline"></ion-icon>
        Smooth Animations
      </h2>
      <p>Experience seamless text animations that trigger as you scroll through the page. Each element smoothly fades in and moves into position, creating an engaging user experience that captures attention and guides the viewer through your content.</p>
    </div>

    <div class="text-block slide-in-left">
      <h2>
        <ion-icon name="brush-outline"></ion-icon>
        Professional Design
      </h2>
      <p>Clean, minimal aesthetics combined with purposeful motion create a sophisticated presentation. The animations are subtle yet effective, never overwhelming the content but enhancing its impact.</p>
    </div>

    <div class="text-block slide-in-right">
      <h2>
        <ion-icon name="flash-outline"></ion-icon>
        Optimized Performance
      </h2>
      <p>Built with performance in mind, these animations use CSS transforms and opacity for hardware-accelerated rendering. The result is smooth, jank-free motion that works beautifully across all devices.</p>
    </div>

    <div class="text-block fade-in">
      <h2>
        <ion-icon name="star-outline"></ion-icon>
        Feature Highlights
      </h2>
    </div>

    <div class="feature-grid">
      <div class="feature-card">
        <ion-icon name="eye-outline"></ion-icon>
        <h3>Viewport Detection</h3>
        <p>Automatically detects when elements enter the viewport</p>
      </div>
      <div class="feature-card">
        <ion-icon name="layers-outline"></ion-icon>
        <h3>Multiple Styles</h3>
        <p>Various animation patterns to suit your needs</p>
      </div>
      <div class="feature-card">
        <ion-icon name="settings-outline"></ion-icon>
        <h3>Easy Customization</h3>
        <p>Simple to modify and adapt to your project</p>
      </div>
    </div>
  </div>
</div>

   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #FF0000 0%, #764ba2 100%);
            color: #333;
            overflow-x: hidden;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        .content-section {
            min-height: 100vh;
            background: white;
            padding: 6rem 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .animate-text {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .animate-text.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .text-block {
            margin-bottom: 4rem;
        }

        .text-block h2 {
            font-size: 2.5rem;
            color: #FF0000;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .text-block p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .feature-card {
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 12px;
            text-align: center;
            opacity: 0;
            transform: translateY(50px) scale(0.95);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .feature-card.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .feature-card:nth-child(1) { transition-delay: 0.1s; }
        .feature-card:nth-child(2) { transition-delay: 0.2s; }
        .feature-card:nth-child(3) { transition-delay: 0.3s; }

        .feature-card ion-icon {
            font-size: 3rem;
            color: #FF0000;
            margin-bottom: 1rem;
        }

        .feature-card h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .feature-card p {
            color: #666;
            font-size: 0.95rem;
        }

        .slide-in-left {
            opacity: 0;
            transform: translateX(-100px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .slide-in-right {
            opacity: 0;
            transform: translateX(100px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .slide-in-left.visible,
        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in {
            opacity: 0;
            transition: opacity 1s ease;
        }

        .fade-in.visible {
            opacity: 1;
        }

        // Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        // Observe all animated elements
        const animatedElements = document.querySelectorAll(
            '.animate-text, .slide-in-left, .slide-in-right, .fade-in, .feature-card'
        );

        animatedElements.forEach(el => observer.observe(el));