gsap.registerPlugin(ScrollTrigger)


const smallParallax1 = document.querySelectorAll('.small-parallax-1') //change this to whatever you want the class to be

smallParallax1.forEach(parallax3 => {
  gsap.fromTo(
    parallax3,
    { yPercent: 6 }, //the bigger the percentage change the faster the movement.
    {
      yPercent: -40,
      ease: 'none',
      scrollTrigger: {
        trigger: parallax3,
        start: 'top 100%',
        end: 'top 20%',
        scrub: true,
        markers: false
      },
    }
  );
});


const smallParallax2 = document.querySelectorAll('.small-parallax-2') //change this to whatever you want the class to be

smallParallax2.forEach(parallax3 => {
  gsap.fromTo(
    parallax3,
    { yPercent: 6 }, //the bigger the percentage change the faster the movement.
    {
      yPercent: -40,
      ease: 'none',
      scrollTrigger: {
        trigger: parallax3,
        start: 'top 80%',
        end: 'top 50%',
        scrub: true,
        markers: false
      },
    }
  );
});


const smallParallax3 = document.querySelectorAll('.small-parallax-3') //change this to whatever you want the class to be

smallParallax3.forEach(parallax3 => {
  gsap.fromTo(
    parallax3,
    { yPercent: 4 }, //the bigger the percentage change the faster the movement.
    {
      yPercent: -40,
      ease: 'none',
      scrollTrigger: {
        trigger: parallax3,
        start: 'top 70%',
        end: 'top 40%',
        scrub: true,
        markers: false
      },
    }
  );
});