mycsslab/src/motion/flux-gsap.js

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS GSAP Integration
 * JavaScript module for GSAP-powered animations
 */

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Register GSAP plugins
gsap.registerPlugin(ScrollTrigger);

class FluxMotion {
  constructor() {
    this.animations = new Map();
    this.scrollTriggers = new Map();
    this.init();
  }

  init() {
    // Initialize animations when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.setupAnimations());
    } else {
      this.setupAnimations();
    }
  }

  setupAnimations() {
    this.setupBasicAnimations();
    this.setupScrollAnimations();
    this.setupHoverAnimations();
    this.setupStaggerAnimations();
    this.setupTimelineAnimations();
  }

  setupBasicAnimations() {
    // Fade animations
    this.animateElements('.fx-gsap-fade-in', {
      opacity: 0,
      duration: 0.5,
      ease: 'power2.out'
    });

    this.animateElements('.fx-gsap-fade-out', {
      opacity: 1,
      duration: 0.5,
      ease: 'power2.out'
    });

    // Slide animations
    this.animateElements('.fx-gsap-slide-up', {
      opacity: 0,
      y: 30,
      duration: 0.6,
      ease: 'power2.out'
    });

    this.animateElements('.fx-gsap-slide-down', {
      opacity: 0,
      y: -30,
      duration: 0.6,
      ease: 'power2.out'
    });

    this.animateElements('.fx-gsap-slide-left', {
      opacity: 0,
      x: -30,
      duration: 0.6,
      ease: 'power2.out'
    });

    this.animateElements('.fx-gsap-slide-right', {
      opacity: 0,
      x: 30,
      duration: 0.6,
      ease: 'power2.out'
    });

    // Scale animations
    this.animateElements('.fx-gsap-scale-in', {
      opacity: 0,
      scale: 0.8,
      duration: 0.4,
      ease: 'back.out(1.7)'
    });

    this.animateElements('.fx-gsap-scale-out', {
      opacity: 1,
      scale: 1,
      duration: 0.4,
      ease: 'back.out(1.7)'
    });

    // Rotate animations
    this.animateElements('.fx-gsap-rotate-in', {
      opacity: 0,
      rotation: 180,
      duration: 0.6,
      ease: 'power2.out'
    });

    this.animateElements('.fx-gsap-rotate-out', {
      opacity: 1,
      rotation: 0,
      duration: 0.6,
      ease: 'power2.out'
    });

    // Bounce animations
    this.animateElements('.fx-gsap-bounce-in', {
      opacity: 0,
      scale: 0.3,
      duration: 0.6,
      ease: 'bounce.out'
    });

    this.animateElements('.fx-gsap-bounce-out', {
      opacity: 1,
      scale: 1,
      duration: 0.6,
      ease: 'bounce.out'
    });
  }

  setupScrollAnimations() {
    // Scroll-triggered fade in
    this.setupScrollTrigger('.fx-scroll-fade-in', {
      opacity: 0,
      duration: 0.8,
      ease: 'power2.out'
    });

    // Scroll-triggered slide up
    this.setupScrollTrigger('.fx-scroll-slide-up', {
      opacity: 0,
      y: 50,
      duration: 0.8,
      ease: 'power2.out'
    });

    // Scroll-triggered slide down
    this.setupScrollTrigger('.fx-scroll-slide-down', {
      opacity: 0,
      y: -50,
      duration: 0.8,
      ease: 'power2.out'
    });

    // Scroll-triggered slide left
    this.setupScrollTrigger('.fx-scroll-slide-left', {
      opacity: 0,
      x: -50,
      duration: 0.8,
      ease: 'power2.out'
    });

    // Scroll-triggered slide right
    this.setupScrollTrigger('.fx-scroll-slide-right', {
      opacity: 0,
      x: 50,
      duration: 0.8,
      ease: 'power2.out'
    });

    // Scroll-triggered scale in
    this.setupScrollTrigger('.fx-scroll-scale-in', {
      opacity: 0,
      scale: 0.8,
      duration: 0.6,
      ease: 'back.out(1.7)'
    });

    // Scroll-triggered rotate in
    this.setupScrollTrigger('.fx-scroll-rotate-in', {
      opacity: 0,
      rotation: 45,
      duration: 0.8,
      ease: 'power2.out'
    });
  }

  setupHoverAnimations() {
    // Hover scale effects
    this.setupHoverAnimation('.fx-hover-gsap-scale', {
      scale: 1.05,
      duration: 0.2,
      ease: 'power2.out'
    });

    // Hover rotate effects
    this.setupHoverAnimation('.fx-hover-gsap-rotate', {
      rotation: 5,
      duration: 0.2,
      ease: 'power2.out'
    });

    // Hover lift effects
    this.setupHoverAnimation('.fx-hover-gsap-lift', {
      y: -5,
      boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
      duration: 0.3,
      ease: 'power2.out'
    });

    // Hover glow effects
    this.setupHoverAnimation('.fx-hover-gsap-glow', {
      boxShadow: '0 0 20px rgba(59, 130, 246, 0.5)',
      duration: 0.3,
      ease: 'power2.out'
    });

    // Focus effects
    this.setupFocusAnimation('.fx-focus-gsap-scale', {
      scale: 1.02,
      duration: 0.2,
      ease: 'power2.out'
    });

    this.setupFocusAnimation('.fx-focus-gsap-ring', {
      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)',
      duration: 0.2,
      ease: 'power2.out'
    });
  }

  setupStaggerAnimations() {
    // Stagger fade in
    this.setupStaggerAnimation('.fx-stagger-fade-in', {
      opacity: 0,
      duration: 0.5,
      ease: 'power2.out',
      stagger: 0.1
    });

    // Stagger slide up
    this.setupStaggerAnimation('.fx-stagger-slide-up', {
      opacity: 0,
      y: 20,
      duration: 0.6,
      ease: 'power2.out',
      stagger: 0.1
    });

    // Stagger scale in
    this.setupStaggerAnimation('.fx-stagger-scale-in', {
      opacity: 0,
      scale: 0.95,
      duration: 0.4,
      ease: 'back.out(1.7)',
      stagger: 0.1
    });
  }

  setupTimelineAnimations() {
    // Timeline fade in
    this.setupTimelineAnimation('.fx-timeline-fade-in', {
      opacity: 0,
      duration: 0.5,
      ease: 'power2.out'
    });

    // Timeline slide up
    this.setupTimelineAnimation('.fx-timeline-slide-up', {
      opacity: 0,
      y: 30,
      duration: 0.6,
      ease: 'power2.out'
    });

    // Timeline scale in
    this.setupTimelineAnimation('.fx-timeline-scale-in', {
      opacity: 0,
      scale: 0.9,
      duration: 0.4,
      ease: 'back.out(1.7)'
    });
  }

  animateElements(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const animation = gsap.fromTo(element, 
        { opacity: 0 }, 
        { ...animationProps, opacity: 1 }
      );
      this.animations.set(element, animation);
    });
  }

  setupScrollTrigger(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const trigger = ScrollTrigger.create({
        trigger: element,
        start: 'top 80%',
        end: 'bottom 20%',
        toggleActions: 'play none none reverse',
        animation: gsap.fromTo(element, 
          { opacity: 0 }, 
          { ...animationProps, opacity: 1 }
        )
      });
      this.scrollTriggers.set(element, trigger);
    });
  }

  setupHoverAnimation(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const hoverIn = gsap.to(element, {
        ...animationProps,
        paused: true
      });

      const hoverOut = gsap.to(element, {
        scale: 1,
        rotation: 0,
        y: 0,
        boxShadow: 'none',
        duration: 0.2,
        ease: 'power2.out',
        paused: true
      });

      element.addEventListener('mouseenter', () => hoverIn.play());
      element.addEventListener('mouseleave', () => hoverOut.play());
    });
  }

  setupFocusAnimation(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const focusIn = gsap.to(element, {
        ...animationProps,
        paused: true
      });

      const focusOut = gsap.to(element, {
        scale: 1,
        boxShadow: 'none',
        duration: 0.2,
        ease: 'power2.out',
        paused: true
      });

      element.addEventListener('focus', () => focusIn.play());
      element.addEventListener('blur', () => focusOut.play());
    });
  }

  setupStaggerAnimation(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    if (elements.length > 0) {
      const stagger = animationProps.stagger || 0.1;
      delete animationProps.stagger;

      const animation = gsap.fromTo(elements, 
        { opacity: 0 }, 
        { ...animationProps, opacity: 1, stagger }
      );
      this.animations.set(selector, animation);
    }
  }

  setupTimelineAnimation(selector, animationProps) {
    const elements = document.querySelectorAll(selector);
    if (elements.length > 0) {
      const tl = gsap.timeline();
      
      elements.forEach((element, index) => {
        tl.fromTo(element, 
          { opacity: 0 }, 
          { ...animationProps, opacity: 1 },
          index * 0.1
        );
      });

      this.animations.set(selector, tl);
    }
  }

  // Public API methods
  play(selector) {
    const animation = this.animations.get(selector);
    if (animation) {
      animation.play();
    }
  }

  pause(selector) {
    const animation = this.animations.get(selector);
    if (animation) {
      animation.pause();
    }
  }

  reverse(selector) {
    const animation = this.animations.get(selector);
    if (animation) {
      animation.reverse();
    }
  }

  kill(selector) {
    const animation = this.animations.get(selector);
    if (animation) {
      animation.kill();
      this.animations.delete(selector);
    }
  }

  refreshScrollTriggers() {
    ScrollTrigger.refresh();
  }

  destroy() {
    this.animations.forEach(animation => animation.kill());
    this.scrollTriggers.forEach(trigger => trigger.kill());
    this.animations.clear();
    this.scrollTriggers.clear();
  }
}

// Create global instance
window.FluxMotion = new FluxMotion();

// Export for module usage
export default FluxMotion;