GSAP + Webflow

Webflow.push(function() {
  // Your GSAP code runs here after Webflow is ready
  gsap.to('.my-element', { duration: 1, opacity: 1 });
});

// Initialize animations
Webflow.push(function() {
  console.log('Webflow is ready!');

  // Hero animation
  gsap.from('.wf-hero h1', {
    duration: 1,
    opacity: 0,
    y: 30,
  });
});

// Initialize ScrollTrigger
Webflow.push(function() {
  // ScrollTrigger code here
  gsap.registerPlugin(ScrollTrigger);
});

// Define animation functions
function initHeroAnimation() {
  gsap.from('.wf-hero h1', {
    duration: 1.2,
    opacity: 0,
    y: 50,
    ease: 'power3.out'
  });
}

function initScrollAnimations() {
  gsap.registerPlugin(ScrollTrigger);

  gsap.utils.toArray('.wf-fade-in').forEach(element => {
    gsap.from(element, {
      scrollTrigger: {
        trigger: element,
        start: 'top 80%',
        markers: false
      },
      opacity: 0,
      y: 30,
      duration: 0.8
    });
  });
}

// Run when Webflow is ready
Webflow.push(function() {
  initHeroAnimation();
  initScrollAnimations();
});

// Fallback if Webflow.push() not available
if (window.Webflow && typeof Webflow.push === 'function') {
  Webflow.push(function() {
    // GSAP code here
  });
} else {
  document.addEventListener('DOMContentLoaded', function() {
    // GSAP code here
  });
}

Webflow.push(function() {
  // Register the ScrollTrigger plugin
  gsap.registerPlugin(ScrollTrigger);

  // Now you can use ScrollTrigger in your animations
});

Webflow.push(function() {
  gsap.registerPlugin(ScrollTrigger);

  // Fade in sections as they scroll into view
  gsap.from('.wf-section', {
    opacity: 0,
    y: 50,
    duration: 0.8,
    stagger: 0.2,
    scrollTrigger: {
      trigger: '.wf-section',
      start: 'top 80%',     // When top of element is 80% down the viewport
      end: 'top 50%',       // When top of element is 50% down
      // markers: true      // Uncomment to debug (shows start/end points)
    }
  });
});

Webflow.push(function() {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to('.hero-content', {
    opacity: 0.3,
    y: -100,
    duration: 1,
    scrollTrigger: {
      trigger: '.hero-section',
      start: 'top top',
      end: 'bottom top',
      scrub: 1,              // Smooth scrubbing (1 = 1 second delay)
      pin: true,             // Pin the section
      pinSpacing: true       // Account for pinned element height
    }
  });
});

Webflow.push(function() {
  gsap.registerPlugin(ScrollTrigger);

  // Create a timeline that plays as you scroll
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: '.timeline-section',
      start: 'top center',
      end: 'bottom center',
      scrub: true,           // true = instant, 1-3 = smooth
      markers: false
    }
  });

  tl.from('.step-1', { opacity: 0, y: 50, duration: 1 })
    .from('.step-2', { opacity: 0, y: 50, duration: 1 }, '-=0.5')
    .from('.step-3', { opacity: 0, y: 50, duration: 1 }, '-=0.5');
});

Webflow.push(function() {
  gsap.registerPlugin(ScrollTrigger);

  // Background image moves slower than foreground
  gsap.to('.parallax-bg', {
    y: -200,
    ease: 'none',
    scrollTrigger: {
      trigger: '.parallax-section',
      start: 'top top',
      end: 'bottom top',
      scrub: 1
    }
  });
});

Webflow.push(function() {
  // Fade out and navigate
  document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
      // Don't intercept external links or anchors
      if (this.hostname === location.hostname &&
          !this.href.includes('#') &&
          !this.classList.contains('no-transition')) {

        e.preventDefault();
        const href = this.href;

        // Fade out animation
        gsap.to('body', {
          opacity: 0,
          duration: 0.5,
          onComplete: () => {
            window.location.href = href;
          }
        });
      }
    });
  });

  // Fade in on page load
  gsap.from('body', {
    opacity: 0,
    duration: 0.5
  });
});

Webflow.push(function() {
  // Exit animation when leaving page
  function exitAnimation() {
    return gsap.to('main', {
      opacity: 0,
      y: 50,
      duration: 0.5,
      ease: 'power2.in'
    });
  }

  // Enter animation when arriving on page
  function enterAnimation() {
    return gsap.from('main', {
      opacity: 0,
      y: 50,
      duration: 0.5,
      ease: 'power2.out'
    });
  }

  // Hook up exit animation to links
  document.querySelectorAll('a:not(.no-transition)').forEach(link => {
    link.addEventListener('click', function(e) {
      if (this.hostname === location.hostname &&
          !this.href.includes('#')) {
        e.preventDefault();
        const href = this.href;

        exitAnimation().then(() => {
          window.location.href = href;
        });
      }
    });
  });

  // Play enter animation on page load
  enterAnimation();
});

Webflow.push(function() {
  const preloader = document.querySelector('.page-preloader');

  // Animate preloader in on transition
  function showPreloader() {
    return gsap.to(preloader, {
      opacity: 1,
      pointerEvents: 'auto',
      duration: 0.3
    });
  }

  // Hide preloader when page loads
  function hidePreloader() {
    return gsap.to(preloader, {
      opacity: 0,
      pointerEvents: 'none',
      duration: 0.5,
      delay: 0.5
    });
  }

  // On page load, hide preloader
  window.addEventListener('load', () => {
    hidePreloader();
  });

  // On link click, show preloader and transition
  document.querySelectorAll('a:not(.no-transition)').forEach(link => {
    link.addEventListener('click', function(e) {
      if (this.hostname === location.hostname &&
          !this.href.includes('#')) {
        e.preventDefault();

        showPreloader().then(() => {
          setTimeout(() => {
            window.location.href = this.href;
          }, 300);
        });
      }
    });
  });
});

/* In your CSS file */
.animate-element {
  will-change: opacity, transform;
}

/* Or add it dynamically with GSAP */
Webflow.push(function() {
  gsap.set('.animate-element', {
    willChange: 'opacity, transform'
  });

  // Then animate
  gsap.to('.animate-element', {
    opacity: 0.5,
    duration: 1
  });
});

Webflow.push(function() {
  // Check if elements exist
  const elements = document.querySelectorAll('.my-element');
  console.log('Found elements:', elements.length);

  // Log GSAP version
  console.log('GSAP Version:', gsap.version);

  // Check if plugins are registered
  console.log('Plugins:', gsap.plugins());

  // Enable ScrollTrigger debugging
  gsap.registerPlugin(ScrollTrigger);
  gsap.to('.my-element', {
    y: 50,
    scrollTrigger: {
      trigger: '.my-element',
      markers: true  // Show start/end markers
    }
  });

  // Log animation timeline
  const tl = gsap.timeline();
  tl.to('.element-1', { opacity: 1 });
  console.log('Timeline:', tl);
});

Webflow.push(function() {
  // Monitor FPS during animations
  let lastTime = performance.now();
  let fps = 0;

  const checkFPS = () => {
    const now = performance.now();
    const delta = now - lastTime;
    fps = Math.round(1000 / delta);
    console.log('FPS:', fps);
    lastTime = now;
  };

  // Check FPS during scroll
  window.addEventListener('scroll', checkFPS, { passive: true });

  // Clean up after animations complete
  gsap.to('.element', {
    opacity: 1,
    duration: 2,
    onComplete: () => {
      window.removeEventListener('scroll', checkFPS);
      console.log('Animation complete');
    }
  });
});