suryajs-animfx/src/effects/textEffects.js

SuryaJS - A powerful JavaScript animation library with 20+ image, text, and advanced 3D effects

class TextEffects {
  constructor() {
    this.defaultDuration = 1000;
    this.defaultEasing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
  }

  // Effect 1: Typewriter Effect
  typeWriter(elements, options = {}) {
    const speed = options.speed || 50;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      const text = element.textContent;
      element.textContent = '';
      element.style.borderRight = '2px solid';
      element.style.animation = 'blink 1s infinite';

      setTimeout(() => {
        let i = 0;
        const typeInterval = setInterval(() => {
          element.textContent += text.charAt(i);
          i++;
          if (i >= text.length) {
            clearInterval(typeInterval);
            element.style.borderRight = 'none';
            element.style.animation = 'none';
          }
        }, speed);
      }, delay + (index * 500));
    });
  }

  // Effect 2: Fade In Up
  fadeInUp(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.opacity = '0';
      element.style.transform = 'translateY(30px)';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.opacity = '1';
        element.style.transform = 'translateY(0)';
      }, delay + (index * 100));
    });
  }

  // Effect 3: Letter Spacing Animation
  letterSpacing(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.letterSpacing = '10px';
      element.style.opacity = '0';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.letterSpacing = 'normal';
        element.style.opacity = '1';
      }, delay + (index * 150));
    });
  }

  // Effect 4: Color Wave
  colorWave(elements, options = {}) {
    const colors = options.colors || ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
    const duration = options.duration || 2000;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      setTimeout(() => {
        const text = element.textContent;
        element.innerHTML = '';
        
        [...text].forEach((char, charIndex) => {
          const span = document.createElement('span');
          span.textContent = char === ' ' ? '\u00A0' : char;
          span.style.display = 'inline-block';
          span.style.transition = 'color 0.3s ease';
          element.appendChild(span);
          
          setTimeout(() => {
            const colorIndex = charIndex % colors.length;
            span.style.color = colors[colorIndex];
            
            setTimeout(() => {
              span.style.color = '';
            }, 1000);
          }, charIndex * 100);
        });
      }, delay + (index * 300));
    });
  }

  // Effect 5: Split Reveal
  splitReveal(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      const text = element.textContent;
      element.innerHTML = '';
      
      [...text].forEach((char, charIndex) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.style.display = 'inline-block';
        span.style.opacity = '0';
        span.style.transform = 'translateY(20px) rotateX(90deg)';
        span.style.transition = `all ${duration/2}ms ${this.defaultEasing}`;
        element.appendChild(span);
      });

      setTimeout(() => {
        const spans = element.querySelectorAll('span');
        spans.forEach((span, spanIndex) => {
          setTimeout(() => {
            span.style.opacity = '1';
            span.style.transform = 'translateY(0) rotateX(0deg)';
          }, spanIndex * 50);
        });
      }, delay + (index * 200));
    });
  }

  // Utility method for creating text reveal on scroll
  revealOnScroll(selector, effectNumber) {
    const elements = document.querySelectorAll(selector);
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          switch(effectNumber) {
            case 1:
              this.typeWriter([entry.target]);
              break;
            case 2:
              this.fadeInUp([entry.target]);
              break;
            case 3:
              this.letterSpacing([entry.target]);
              break;
            case 4:
              this.colorWave([entry.target]);
              break;
            case 5:
              this.splitReveal([entry.target]);
              break;
          }
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });

    elements.forEach(element => observer.observe(element));
  }

  // Method to create custom text effect
  customTextEffect(elements, animationClass, options = {}) {
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add(animationClass);
      }, delay + (index * 100));
    });
  }
}

export default TextEffects;