aperonight/app/javascript/controllers/featured_event_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["card"]
  static classes = ["visible"]
  static values = {
    threshold: { type: Number, default: 0.1 },
    rootMargin: { type: String, default: '0px 0px -50px 0px' },
    staggerDelay: { type: Number, default: 0.2 }
  }

  connect() {
    console.log("FeaturedEventController connected")
    this.setupIntersectionObserver()
    this.setupStaggeredAnimations()
  }

  disconnect() {
    if (this.observer) {
      this.observer.disconnect()
    }
  }

  setupIntersectionObserver() {
    const observerOptions = {
      threshold: this.thresholdValue,
      rootMargin: this.rootMarginValue
    }

    this.observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('visible')
       }
     })
   }, observerOptions)

    // Observe all card elements within this controller's scope
   const elements = this.cardTargets
   console.log("Card targets:", elements)
   elements.forEach(el => {
     this.observer.observe(el)
   })
  }

  setupStaggeredAnimations() {
   console.log("Setting up staggered animations")
   console.log("Card targets:", this.cardTargets)
   // Add staggered animation delays to cards
   this.cardTargets.forEach((card, index) => {
     card.style.transitionDelay = `${index * this.staggerDelayValue}s`
     card.classList.remove('visible')
   })
 }
}


/** Old code
 <script>
  // Add animation classes when elements are in view
  document.addEventListener("DOMContentLoaded", function() {
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, observerOptions);

    // Observe animated elements
    document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
      observer.observe(el);
    });

    // Add staggered animation delays
    document.querySelectorAll('.featured-event-card').forEach((card, index) => {
      card.style.transitionDelay = `${index * 0.2}s`;
    });
  });
</script>
 */