$(".video-motion-container").each(function () {
  const currentElement = this;
  const eyebrow = $(this).find('#eyebrow-headline-joyful')
  const heading = $(this).find('#heading-joyful')
  const animationContainer = $(this).find('#video-motion-animation')

  const scrollTriggerOptions = {
    trigger: currentElement,
    start: "70% bottom",
    end: "+=200",
    scrub: 1,
    marker: false
  }

  gsap.to(
    animationContainer,
    {
      scrollTrigger: scrollTriggerOptions,
      height: '100%'
    }
  )
  
  gsap.to(
    eyebrow,
    {
      scrollTrigger: {
        ...scrollTriggerOptions, 
        start: "75% bottom",
        end: "+=50",
      },
      opacity: 1,
      letterSpacing: 1.5
    },
    );
    
    gsap.to(
    heading,
    {
      scrollTrigger: {
        ...scrollTriggerOptions, 
        start: "85% bottom",
        end: "+=100",
      },
      opacity: 1
    },
  );
 })