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

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

import { gsap } from 'gsap';

export class ImageEffects {
  constructor(element, options = {}) {
    this.element = element;
    this.options = {
      duration: options.duration || 2,
      easing: options.easing || 'power2.out',
      ...options
    };
  }

  morph(target, options = {}) {
    const timeline = gsap.timeline();
    
    timeline.to(this.element, {
      duration: options.duration || this.options.duration,
      morphSVG: target || this.element,
      ease: options.easing || this.options.easing
    });

    return timeline;
  }

  distortion(options = {}) {
    const timeline = gsap.timeline();
    
    timeline.to(this.element, {
      duration: options.duration || this.options.duration,
      filter: "hue-rotate(180deg) saturate(2) contrast(1.5)",
      ease: options.easing || this.options.easing
    }).to(this.element, {
      duration: options.duration || this.options.duration,
      filter: "none",
      ease: options.easing || this.options.easing
    });

    return timeline;
  }

  glitch(options = {}) {
    const intensity = options.intensity || 10;
    const timeline = gsap.timeline({ repeat: -1 });
    
    timeline.to(this.element, {
      duration: 0.1,
      x: intensity,
      ease: "none"
    }).to(this.element, {
      duration: 0.1,
      x: -intensity,
      ease: "none"
    }).to(this.element, {
      duration: 0.1,
      x: 0,
      ease: "none"
    });

    return timeline;
  }

  wave(options = {}) {
    const amplitude = options.amplitude || 20;
    const duration = options.duration || this.options.duration;
    const timeline = gsap.timeline({ repeat: -1 });
    
    timeline.to(this.element, {
      duration: duration,
      y: amplitude,
      ease: "sine.inOut"
    }).to(this.element, {
      duration: duration,
      y: -amplitude,
      ease: "sine.inOut"
    });

    return timeline;
  }

  pulse(options = {}) {
    const scale = options.scale || 1.2;
    const timeline = gsap.timeline({ repeat: -1, yoyo: true });
    
    timeline.to(this.element, {
      duration: options.duration || this.options.duration,
      scale: scale,
      ease: options.easing || this.options.easing
    });

    return timeline;
  }

  shake(options = {}) {
    const intensity = options.intensity || 5;
    const timeline = gsap.timeline({ repeat: -1 });
    
    for (let i = 0; i < 10; i++) {
      timeline.to(this.element, {
        duration: 0.05,
        x: (Math.random() - 0.5) * intensity * 2,
        y: (Math.random() - 0.5) * intensity * 2,
        ease: "none"
      });
    }
    
    timeline.to(this.element, {
      duration: 0.1,
      x: 0,
      y: 0,
      ease: "power2.out"
    });

    return timeline;
  }

  fadeIn(options = {}) {
    const timeline = gsap.timeline();
    
    timeline.fromTo(this.element, {
      opacity: 0,
      scale: 0.8
    }, {
      opacity: 1,
      scale: 1,
      duration: options.duration || this.options.duration,
      ease: options.easing || this.options.easing
    });

    return timeline;
  }

  fadeOut(options = {}) {
    const timeline = gsap.timeline();
    
    timeline.to(this.element, {
      opacity: 0,
      scale: 0.8,
      duration: options.duration || this.options.duration,
      ease: options.easing || this.options.easing
    });

    return timeline;
  }
}