Preview instructions on Desktop :)

<!-- GSAP -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
  window.addEventListener('load', function () {
  gsap.registerPlugin(ScrollTrigger);

gsap.registerPlugin(ScrollTrigger);

const allslideLeft = document.querySelectorAll('.slide-left') //change this if you want it to target a different class

allslideLeft.forEach((slideLeft) => {
  gsap.from(slideLeft, {
    xPercent: 30, //change the number if you want it to move further away or closer
    ease: 'power1.out',
    scrollTrigger: {
      trigger: slideLeft, //this is what triggers the animation
      start: 'top 85%', //this is how far from the trigger the element has to be. Similar to our scroll actions
      end: 'top 10%', //this is where it ends
      scrub: true, //change to false if you don't want it to change gradually as the user scrolls
      markers: false // turn this off when done debugging
    }
  })
})

const allslideRight = document.querySelectorAll('.slide-right') //change this if you want it to target a different class

allslideRight.forEach((slideRight) => {
  gsap.from(slideRight, {
    xPercent: -30, //change the number if you want it to move further away or closer
    ease: 'power1.out',
    scrollTrigger: {
      trigger: slideRight, //this is what triggers the animation
      start: 'top 85%', //this is how far from the trigger the element has to be. Similar to our scroll actions
      end: 'top 10%', //this is where it ends
      scrub: true, //change to false if you don't want it to change gradually as the user scrolls
      markers: false // turn this off when done debugging
    }
  })
})

  ScrollTrigger.refresh();
});
</script>