Landing page GSAP & Elementor ep. 3

<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', () => {
    document.querySelectorAll('.reveal-section').forEach(section => {
      const body = section.querySelector('.section-body');

      // measure start (11vh in px) & full content height
      const startH = section.getBoundingClientRect().height;
      const fullH  = section.scrollHeight;
      const extra  = fullH - startH;

      // seed initial state
      gsap.set(body, { autoAlpha: 0, y: 200 });

      // scrub‑only timeline
      gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start:   'top 30%',
          end:     () => +=${extra},  // scroll distance = extra px
          scrub:   true,
        //   markers: true  // uncomment for debug
        }
      })
      // 1) expand height from startH → fullH
      .fromTo(section,
        { height: startH },
        { height: fullH, ease: 'none' },
        0
      )
      // 2) fade & slide in the body
      .fromTo(body,
        { autoAlpha: 0, y: 200 },
        { autoAlpha: 1, y: 0, ease: 'power1.out' },
        0
      );
    });
  });
  
  gsap.registerPlugin(ScrollTrigger);

  window.addEventListener('load', () => {
    document.querySelectorAll('.reveal-section').forEach(section => {
      const divider = section.querySelector('.section-divider');
      if (!divider) return;

      // same range as your section expand
      const startH = section.getBoundingClientRect().height;  // 11vh in px
      const fullH  = section.scrollHeight;                    // full expanded px
      const extra  = fullH - startH;                          // scroll distance

      // animate from 50% → 100% width
      gsap.fromTo(divider,
        { scaleX: 0.5 },
        {
          scaleX: 1,
          ease: 'none',
          scrollTrigger: {
            trigger: section,
            start:  'top 30%',
            end:    () => +=${extra},
            scrub:  true,
            // markers: true  // uncomment to debug
          }
        }
      );
    });
  });
</script>

.reveal-section .section-body {
  opacity: 0;
  transform: translateY(200px);
}

.section-divider {
  /* start at 50% width */
  transform-origin: right center;
  transform: scaleX(0.5);
}