my-animation-lib/src/effects/ParallaxEffect.js

A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration

import { gsap } from 'gsap';

export class ParallaxEffect {
  constructor(element, options = {}) {
    this.element = element;
    this.options = {
      speed: options.speed || 0.5,
      direction: options.direction || 'vertical',
      easing: options.easing || 'power2.out',
      ...options
    };

    this.currentScroll = 0;
    this.init();
  }

  init() {
    this.setupElement();
    this.bindEvents();
  }

  setupElement() {
    this.element.style.willChange = 'transform';
    this.element.style.transform = 'translateZ(0)';
  }

  bindEvents() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
    window.addEventListener('resize', this.handleResize.bind(this));
  }

  handleScroll() {
    this.currentScroll = window.pageYOffset;
    this.updateParallax();
  }

  handleResize() {
    this.updateParallax();
  }

  updateParallax() {
    const rect = this.element.getBoundingClientRect();
    const elementTop = rect.top;
    const elementHeight = rect.height;
    const viewportHeight = window.innerHeight;
    
    let progress = 0;
    
    if (elementTop < viewportHeight && elementTop + elementHeight > 0) {
      progress = (viewportHeight - elementTop) / (viewportHeight + elementHeight);
      progress = Math.max(0, Math.min(1, progress));
      
      const offset = progress * this.options.speed * 100;
      
      if (this.options.direction === 'vertical') {
        gsap.set(this.element, {
          y: offset,
          ease: this.options.easing
        });
      } else if (this.options.direction === 'horizontal') {
        gsap.set(this.element, {
          x: offset,
          ease: this.options.easing
        });
      }
    }
  }

  destroy() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('resize', this.handleResize);
    
    gsap.set(this.element, {
      x: 0,
      y: 0,
      clearProps: 'transform'
    });
  }
}