[Animation on scroll]

Hello there, I am very new to GSAP and animation and started learning. 
I am working on a wordpress website with elementor builder and I need to make animation like "Our Offer" section before footer section on this website. You can see animation by visiting below link:
https://landorandfitch.com/en

My website structure for this section is, I have a parent section and inside this there are three inner section and each section has a content and image on right side.

I have coded this. Kindly guide me where I am going wrong and how can I achieve this animation? Any help would be appreciated. Thanks

const panels = document.querySelectorAll('.panel');

 

var controller = new ScrollMagic.Controller();

 

new ScrollMagic.Scene({

  triggerElement: ".sticky",

  triggerHook: "onLeave",

  duration: "300%",

})

  .setClassToggle(".sticky", ".active")

  .setPin(".sticky")

  .addTo(controller);

var sections = gsap.utils.toArray('.swipe-text');

 

sections.forEach((section) => {

 

//   gsap.to(section, {

    let tl = gsap.timeline({

    scrollTrigger: {

        trigger: section,

        pin: true,

        pinSpacing: false,

        start: 'top top',

        scrub: true,

        end: '+=500',

        // end: () => `+=${panels.length * window.innerHeight}`,

        markers: true

    }

});

 

  tl

  .to(section, {

    autoAlpha: 1,

  },0.5)

  .to(section, {

      autoAlpha: 1,

    }

  )

});