suryajs-animfx/src/index.js

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

import ImageEffects from './effects/imageEffects.js';
import TextEffects from './effects/textEffects.js';
import AdvancedEffects from './effects/advancedEffects.js';
import './styles/animations.css';

class AnimFX {
  constructor() {
    this.imageEffects = new ImageEffects();
    this.textEffects = new TextEffects();
    this.advancedEffects = new AdvancedEffects();
    this.init();
  }

  init() {
    // Auto-initialize when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.autoInit());
    } else {
      this.autoInit();
    }
  }

  autoInit() {
    // Auto-detect and apply effects based on data attributes
    this.detectAndApplyEffects();
  }

  detectAndApplyEffects() {
    // Detect image effects
    const imageElements = document.querySelectorAll('[data-image-effect]');
    imageElements.forEach(element => {
      const effectNumber = parseInt(element.getAttribute('data-image-effect'));
      this.imageEffect(effectNumber, element);
    });

    // Detect text effects
    const textElements = document.querySelectorAll('[data-text-effect]');
    textElements.forEach(element => {
      const effectNumber = parseInt(element.getAttribute('data-text-effect'));
      this.textEffect(effectNumber, element);
    });
  }

  // Public API methods
  imageEffect(effectNumber, target = null) {
    const elements = target ? (Array.isArray(target) ? target : [target]) : Array.from(document.querySelectorAll('img, .image-container, .demo-image, .effect-target'));
    
    // Debug logging
    console.log(`AnimFX: Running image effect ${effectNumber} on ${elements.length} elements`);
    
    // Filter out any null/undefined elements
    const validElements = elements.filter(el => el && el.style);
    
    if (validElements.length === 0) {
      console.warn(`AnimFX: No valid elements found for image effect ${effectNumber}`);
      return this;
    }
    
    switch(effectNumber) {
      case 1:
        this.imageEffects.fadeInScale(validElements);
        break;
      case 2:
        this.imageEffects.slideInRotate(validElements);
        break;
      case 3:
        this.imageEffects.zoomBlur(validElements);
        break;
      case 4:
        this.imageEffects.flipReveal(validElements);
        break;
      case 5:
        this.imageEffects.glitchEffect(validElements);
        break;
      default:
        console.warn(`Image effect ${effectNumber} not found. Available effects: 1-5`);
    }
    return this;
  }

  textEffect(effectNumber, target = null) {
    const elements = target ? (Array.isArray(target) ? target : [target]) : Array.from(document.querySelectorAll('.text-animate, h1, h2, h3, p'));
    
    switch(effectNumber) {
      case 1:
        this.textEffects.typeWriter(elements);
        break;
      case 2:
        this.textEffects.fadeInUp(elements);
        break;
      case 3:
        this.textEffects.letterSpacing(elements);
        break;
      case 4:
        this.textEffects.colorWave(elements);
        break;
      case 5:
        this.textEffects.splitReveal(elements);
        break;
      default:
        console.warn(`Text effect ${effectNumber} not found. Available effects: 1-5`);
    }
    return this;
  }

  getElements(target, selectors) {
    const elements = target ? (Array.isArray(target) ? target : [target]) : Array.from(document.querySelectorAll(selectors));
    return elements.filter(el => el && el.style);
  }

  // Advanced Effects API
  mouseFollower(target = null, options = {}) {
    const elements = this.getElements(target, '.mouse-follower, .effect-target, img, div');
    this.advancedEffects.mouseFollower(elements, options);
    return this;
  }

  mouseMagnet(target = null, options = {}) {
    const elements = this.getElements(target, '.mouse-magnet, .effect-target, img, div');
    this.advancedEffects.mouseMagnet(elements, options);
    return this;
  }

  magneticPull(target = null, options = {}) {
    const elements = this.getElements(target, '.magnetic-pull, .effect-target, img, div');
    this.advancedEffects.magneticPull(elements, options);
    return this;
  }

  tilt3D(target = null, options = {}) {
    const elements = this.getElements(target, '.tilt-3d, .effect-target, img, div');
    this.advancedEffects.tilt3D(elements, options);
    return this;
  }

  parallax3D(target = null, options = {}) {
    const elements = this.getElements(target, '.parallax-3d, .effect-target, img, div');
    this.advancedEffects.parallax3D(elements, options);
    return this;
  }

  liquidDistortion(target = null, options = {}) {
    const elements = this.getElements(target, '.liquid-distortion, .effect-target, img, div');
    this.advancedEffects.liquidDistortion(elements, options);
    return this;
  }

  floatingAnimation(target = null, options = {}) {
    const elements = this.getElements(target, '.floating-animation, .effect-target, img, div');
    this.advancedEffects.floatingAnimation(elements, options);
    return this;
  }

  morphingShape(target = null, options = {}) {
    const elements = this.getElements(target, '.morphing-shape, .effect-target, img, div');
    this.advancedEffects.morphingShape(elements, options);
    return this;
  }

  // New Advanced 3D Effects (SheryJS-like)
  card3DFlip(target = null, options = {}) {
    const elements = this.getElements(target, '.card-3d-flip, .effect-target, img, div');
    this.advancedEffects.card3DFlip(elements, options);
    return this;
  }

  cube3DRotation(target = null, options = {}) {
    const elements = this.getElements(target, '.cube-3d-rotation, .effect-target, img, div');
    this.advancedEffects.cube3DRotation(elements, options);
    return this;
  }

  depth3DLayers(target = null, options = {}) {
    const elements = this.getElements(target, '.depth-3d-layers, .effect-target, img, div');
    this.advancedEffects.depth3DLayers(elements, options);
    return this;
  }

  hover3DLift(target = null, options = {}) {
    const elements = this.getElements(target, '.hover-3d-lift, .effect-target, img, div');
    this.advancedEffects.hover3DLift(elements, options);
    return this;
  }

  perspective3DShift(target = null, options = {}) {
    const elements = this.getElements(target, '.perspective-3d-shift, .effect-target, img, div');
    this.advancedEffects.perspective3DShift(elements, options);
    return this;
  }

  ripple3DWave(target = null, options = {}) {
    const elements = this.getElements(target, '.ripple-3d-wave, .effect-target, img, div');
    this.advancedEffects.ripple3DWave(elements, options);
    return this;
  }

  // Cleanup method
  cleanup() {
    this.advancedEffects.cleanup();
    return this;
  }

  // Utility methods
  addHoverEffect(selector, effectType, effectNumber) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      element.addEventListener('mouseenter', () => {
        if (effectType === 'image') {
          this.imageEffect(effectNumber, element);
        } else if (effectType === 'text') {
          this.textEffect(effectNumber, element);
        }
      });
    });
    return this;
  }

  addScrollEffect(selector, effectType, effectNumber, options = {}) {
    const elements = document.querySelectorAll(selector);
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          if (effectType === 'image') {
            this.imageEffect(effectNumber, entry.target);
          } else if (effectType === 'text') {
            this.textEffect(effectNumber, entry.target);
          }
        }
      });
    }, {
      threshold: options.threshold || 0.1,
      rootMargin: options.rootMargin || '0px'
    });

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

// Auto-initialize
const animFX = new AnimFX();

// Export for different module systems
if (typeof module !== 'undefined' && module.exports) {
  module.exports = AnimFX;
}

if (typeof window !== 'undefined') {
  window.AnimFX = AnimFX;
  window.animFX = animFX;
}

export default AnimFX;