Landing page GSAP & Elementor ep. 2

<!-- 3) GSAP + ScrollTrigger + Animation JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
<script>

  gsap.registerPlugin(ScrollTrigger);

  window.addEventListener('load', () => {
    const vw = window.innerWidth;
    const scrubAmt = 1.5;

    // A) Slide each .reveal-section in/out with strong scrubbing
    gsap.utils.toArray('.reveal-section').forEach(section => {
      gsap.fromTo(section,
        { x: vw },
        {
          x: 0,
          ease: 'none',
          scrollTrigger: {
            trigger: section,
            start: 'top 80%',
            end:   'top 20%',
            scrub: scrubAmt,
            // markers: true
          }
        }
      );
    });

    // B) Symmetric clip-path grow/shrink on each .grow-section img
    document.querySelectorAll('.grow-section').forEach(section => {
      const img = section.querySelector('.img-wrapper img');
      if (!img) return;

      // Seed the clip-path in case CSS applied late
      gsap.set(img, { clipPath: 'inset(0 80% 0 80%)' });

      gsap.to(img, {
        clipPath: 'inset(0 0% 0 0)',
        ease:     'none',
        scrollTrigger: {
          trigger: section,
          start:   'top 70%',
          end:     'top 30%',
          scrub:   scrubAmt,
          // markers: true
        }
      });
    });
  });
  
  gsap.registerPlugin(ScrollTrigger);

  window.addEventListener('load', () => {
    gsap.utils.toArray('.section-divider').forEach(divider => {
      gsap.fromTo(divider,
        { scaleX: 0.5 },
        {
          scaleX: 1,
          ease: 'none',
          scrollTrigger: {
            trigger:  divider,
            start:    'top bottom',   // when divider top hits bottom of viewport
            end:      'top center',   // until divider top reaches center of viewport
            scrub:    true,
            // markers: true
          }
        }
      );
    });
  });
</script>

/* Slide‑in wrapper */
  .reveal-section {
    position: relative;
    overflow: hidden;
    transform: translateX(100vw);  /* start off‑screen right */
    will-change: transform;
  }

  /* Ensure the img-wrapper masks overflow */
  .grow-section .img-wrapper {
    overflow: hidden;
    
  }

  /* Seed each image clipped 50% on both sides */
  .grow-section .img-wrapper img {
    display: block;
    clip-path: inset(0 80% 0 80%);
    will-change: clip-path;
  }
  
    .section-divider {
  /* start at 50% width */
  transform-origin: right center;
  transform: scaleX(0.9);
}