animate Text in Javascript

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

<div class="container">
  <div class="header">
    <h1>Animated Text Effects</h1>
    <p>Creative text animations with JavaScript</p>
  </div>

  <!-- Typewriter Effect -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="create-outline"></ion-icon>
      Typewriter Effect
    </div>
    <div class="text-display">
      <div class="typewriter" id="typewriter"></div>
    </div>
  </div>

  <!-- Fade In Words -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="eye-outline"></ion-icon>
      Fade In Words
    </div>
    <div class="text-display">
      <div class="fade-words" id="fadeWords"></div>
    </div>
  </div>

  <!-- Wave Effect -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="pulse-outline"></ion-icon>
      Wave Effect
    </div>
    <div class="text-display">
      <div class="wave-text" id="waveText"></div>
    </div>
  </div>

  <!-- Glitch Effect -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="flash-outline"></ion-icon>
      Glitch Effect
    </div>
    <div class="text-display">
      <div class="glitch" id="glitch">GLITCH TEXT</div>
    </div>
  </div>

  <!-- Color Change -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="color-palette-outline"></ion-icon>
      Color Change Effect
    </div>
    <div class="text-display">
      <div class="color-change" id="colorChange">RAINBOW COLORS</div>
    </div>
  </div>

  <!-- Scramble Effect -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="shuffle-outline"></ion-icon>
      Scramble Effect
    </div>
    <div class="text-display">
      <div class="scramble" id="scramble"></div>
    </div>
  </div>

  <!-- Bounce Effect -->
  <div class="effect-section">
    <div class="effect-title">
      <ion-icon name="basketball-outline"></ion-icon>
      Bounce Effect
    </div>
    <div class="text-display">
      <div class="bounce-text" id="bounceText"></div>
    </div>
  </div>

  <!-- Interactive Demo -->
  <div class="demo-section">
    <h2 class="demo-title">Interactive Text Animation</h2>

    <div class="demo-display">
      <div class="demo-text" id="demoText">Hello World!</div>
    </div>

    <div class="input-group">
      <input 
             type="text" 
             class="text-input" 
             id="customText" 
             placeholder="Enter your text here..."
             value="Hello World!"
             >
    </div>

    <div class="controls">
      <button class="control-btn" onclick="applyEffect('typewriter')">
        <ion-icon name="create-outline"></ion-icon>
        Typewriter
      </button>
      <button class="control-btn" onclick="applyEffect('fade')">
        <ion-icon name="eye-outline"></ion-icon>
        Fade In
      </button>
      <button class="control-btn" onclick="applyEffect('wave')">
        <ion-icon name="pulse-outline"></ion-icon>
        Wave
      </button>
      <button class="control-btn" onclick="applyEffect('slide')">
        <ion-icon name="arrow-forward-outline"></ion-icon>
        Slide In
      </button>
      <button class="control-btn" onclick="applyEffect('scale')">
        <ion-icon name="expand-outline"></ion-icon>
        Scale
      </button>
      <button class="control-btn" onclick="applyEffect('rotate')">
        <ion-icon name="sync-outline"></ion-icon>
        Rotate
      </button>
      <button class="control-btn" onclick="applyEffect('bounce')">
        <ion-icon name="basketball-outline"></ion-icon>
        Bounce
      </button>
      <button class="control-btn" onclick="applyEffect('color')">
        <ion-icon name="color-palette-outline"></ion-icon>
        Color
      </button>
    </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, #01497c 0%, #013a63 100%);
            min-height: 100vh;
            padding: 40px 20px;
            overflow-x: hidden;
        }

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

        .header {
            text-align: center;
            margin-bottom: 60px;
            color: white;
        }

        .header h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #89cff0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }

        .effect-section {
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
            box-shadow: 0 10px 40px rgba(1, 58, 99, 0.3);
            border: 3px solid #013a63;
        }

        .effect-title {
            font-size: 20px;
            font-weight: 700;
            color: #013a63;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .effect-title ion-icon {
            font-size: 24px;
        }

        .text-display {
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%);
            border-radius: 15px;
            border: 2px solid #89cff0;
        }

        /* Typewriter Effect */
        .typewriter {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
            font-family: 'Courier New', monospace;
            border-right: 3px solid #013a63;
            white-space: nowrap;
            overflow: hidden;
        }

        /* Fade In Words */
        .fade-words {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .fade-words span {
            display: inline-block;
            opacity: 0;
            animation: fadeIn 0.8s forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* Wave Effect */
        .wave-text {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .wave-text span {
            display: inline-block;
            animation: wave 1.5s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* Glitch Effect */
        .glitch {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
            position: relative;
        }

        /* Rotation Effect */
        .rotate-text {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .rotate-text span {
            display: inline-block;
            animation: rotate 2s ease-in-out infinite;
        }

        @keyframes rotate {
            0%, 100% { transform: rotateY(0); }
            50% { transform: rotateY(180deg); }
        }

        /* Bounce Effect */
        .bounce-text {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .bounce-text span {
            display: inline-block;
            animation: bounce 1s ease infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Color Change Effect */
        .color-change {
            font-size: 36px;
            font-weight: 700;
        }

        /* Scramble Effect */
        .scramble {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
            font-family: 'Courier New', monospace;
        }

        /* Slide In Effect */
        .slide-in {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .slide-in span {
            display: inline-block;
            opacity: 0;
            transform: translateX(-50px);
            animation: slideIn 0.5s forwards;
        }

        @keyframes slideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Scale Effect */
        .scale-text {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
        }

        .scale-text span {
            display: inline-block;
            animation: scale 1.5s ease-in-out infinite;
        }

        @keyframes scale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        /* Blink Effect */
        .blink {
            font-size: 36px;
            font-weight: 700;
            color: #013a63;
            animation: blink 1s steps(2) infinite;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }

        /* Controls */
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }

        .control-btn {
            padding: 12px 24px;
            background: #013a63;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-btn:hover {
            background: #01497c;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(1, 58, 99, 0.3);
        }

        .control-btn ion-icon {
            font-size: 18px;
        }

        .input-group {
            margin-top: 20px;
        }

        .text-input {
            width: 100%;
            padding: 15px;
            border: 2px solid #013a63;
            border-radius: 10px;
            font-size: 16px;
            color: #013a63;
            font-weight: 600;
        }

        .text-input:focus {
            outline: none;
            border-color: #01497c;
            box-shadow: 0 0 0 4px rgba(1, 58, 99, 0.1);
        }

        /* Interactive Demo Section */
        .demo-section {
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 10px 40px rgba(1, 58, 99, 0.3);
            border: 3px solid #013a63;
        }

        .demo-title {
            font-size: 28px;
            font-weight: 700;
            color: #013a63;
            margin-bottom: 30px;
            text-align: center;
        }

        .demo-display {
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%);
            border-radius: 15px;
            border: 2px solid #89cff0;
            margin-bottom: 30px;
        }

        .demo-text {
            font-size: 42px;
            font-weight: 700;
            color: #013a63;
            text-align: center;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 36px;
            }

            .effect-section {
                padding: 30px 20px;
            }

            .typewriter,
            .fade-words,
            .wave-text,
            .glitch,
            .rotate-text,
            .bounce-text,
            .color-change,
            .scramble,
            .slide-in,
            .scale-text,
            .blink {
                font-size: 24px;
            }

            .demo-text {
                font-size: 28px;
            }
        }

    // Typewriter Effect
        const typewriterText = "Welcome to Animated Text!";
        let typewriterIndex = 0;
        
        function typeWriter() {
            const element = document.getElementById('typewriter');
            if (typewriterIndex < typewriterText.length) {
                element.textContent += typewriterText.charAt(typewriterIndex);
                typewriterIndex++;
                setTimeout(typeWriter, 100);
            } else {
                setTimeout(() => {
                    element.textContent = '';
                    typewriterIndex = 0;
                    typeWriter();
                }, 2000);
            }
        }
        typeWriter();

        // Fade In Words
        function fadeInWords() {
            const text = "Each Word Fades In";
            const words = text.split(' ');
            const element = document.getElementById('fadeWords');
            element.innerHTML = '';
            
            words.forEach((word, index) => {
                const span = document.createElement('span');
                span.textContent = word + ' ';
                span.style.animationDelay = `${index * 0.3}s`;
                element.appendChild(span);
            });
        }
        fadeInWords();
        setInterval(fadeInWords, 4000);

        // Wave Effect
        function waveEffect() {
            const text = "WAVE MOTION";
            const element = document.getElementById('waveText');
            element.innerHTML = '';
            
            text.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.textContent = char;
                span.style.animationDelay = `${index * 0.1}s`;
                element.appendChild(span);
            });
        }
        waveEffect();

        // Glitch Effect
        function glitchEffect() {
            const element = document.getElementById('glitch');
            const originalText = element.textContent;
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
            
            let iteration = 0;
            const interval = setInterval(() => {
                element.textContent = originalText
                    .split('')
                    .map((char, index) => {
                        if (index < iteration) {
                            return originalText[index];
                        }
                        return characters[Math.floor(Math.random() * characters.length)];
                    })
                    .join('');
                
                if (iteration >= originalText.length) {
                    clearInterval(interval);
                }
                iteration += 1/3;
            }, 30);
        }
        setInterval(glitchEffect, 3000);
        glitchEffect();

        // Color Change Effect
        function colorChangeEffect() {
            const element = document.getElementById('colorChange');
            const colors = ['#013a63', '#01497c', '#2a6f97', '#2c7da0', '#468faf', '#61a5c2', '#89cff0'];
            let colorIndex = 0;
            
            setInterval(() => {
                element.style.color = colors[colorIndex];
                colorIndex = (colorIndex + 1) % colors.length;
            }, 500);
        }
        colorChangeEffect();

        // Scramble Effect
        function scrambleEffect() {
            const finalText = "DECODED MESSAGE";
            const element = document.getElementById('scramble');
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let revealed = 0;
            
            function scramble() {
                element.textContent = finalText
                    .split('')
                    .map((char, index) => {
                        if (char === ' ') return ' ';
                        if (index < revealed) return finalText[index];
                        return characters[Math.floor(Math.random() * characters.length)];
                    })
                    .join('');
                
                if (revealed < finalText.length) {
                    revealed += 0.2;
                    setTimeout(scramble, 50);
                } else {
                    setTimeout(() => {
                        revealed = 0;
                        scramble();
                    }, 2000);
                }
            }
            scramble();
        }
        scrambleEffect();

        // Bounce Effect
        function bounceEffect() {
            const text = "BOUNCE!";
            const element = document.getElementById('bounceText');
            element.innerHTML = '';
            
            text.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.textContent = char;
                span.style.animationDelay = `${index * 0.1}s`;
                element.appendChild(span);
            });
        }
        bounceEffect();

        // Interactive Demo
        function applyEffect(effect) {
            const text = document.getElementById('customText').value || 'Hello World!';
            const element = document.getElementById('demoText');
            element.className = 'demo-text';
            element.innerHTML = '';

            switch(effect) {
                case 'typewriter':
                    let i = 0;
                    element.style.borderRight = '3px solid #013a63';
                    element.style.fontFamily = "'Courier New', monospace";
                    const type = setInterval(() => {
                        if (i < text.length) {
                            element.textContent += text.charAt(i);
                            i++;
                        } else {
                            clearInterval(type);
                        }
                    }, 100);
                    break;

                case 'fade':
                    text.split(' ').forEach((word, index) => {
                        const span = document.createElement('span');
                        span.textContent = word + ' ';
                        span.style.display = 'inline-block';
                        span.style.opacity = '0';
                        span.style.animation = 'fadeIn 0.8s forwards';
                        span.style.animationDelay = `${index * 0.3}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'wave':
                    text.split('').forEach((char, index) => {
                        const span = document.createElement('span');
                        span.textContent = char;
                        span.style.display = 'inline-block';
                        span.style.animation = 'wave 1.5s ease-in-out infinite';
                        span.style.animationDelay = `${index * 0.1}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'slide':
                    text.split('').forEach((char, index) => {
                        const span = document.createElement('span');
                        span.textContent = char;
                        span.style.display = 'inline-block';
                        span.style.opacity = '0';
                        span.style.animation = 'slideIn 0.5s forwards';
                        span.style.animationDelay = `${index * 0.05}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'scale':
                    text.split('').forEach((char, index) => {
                        const span = document.createElement('span');
                        span.textContent = char;
                        span.style.display = 'inline-block';
                        span.style.animation = 'scale 1.5s ease-in-out infinite';
                        span.style.animationDelay = `${index * 0.1}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'rotate':
                    text.split('').forEach((char, index) => {
                        const span = document.createElement('span');
                        span.textContent = char;
                        span.style.display = 'inline-block';
                        span.style.animation = 'rotate 2s ease-in-out infinite';
                        span.style.animationDelay = `${index * 0.1}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'bounce':
                    text.split('').forEach((char, index) => {
                        const span = document.createElement('span');
                        span.textContent = char;
                        span.style.display = 'inline-block';
                        span.style.animation = 'bounce 1s ease infinite';
                        span.style.animationDelay = `${index * 0.1}s`;
                        element.appendChild(span);
                    });
                    break;

                case 'color':
                    const colors = ['#013a63', '#01497c', '#2a6f97', '#468faf', '#89cff0'];
                    let colorIndex = 0;
                    element.textContent = text;
                    setInterval(() => {
                        element.style.color = colors[colorIndex];
                        colorIndex = (colorIndex + 1) % colors.length;
                    }, 500);
                    break;
            }
        }