Animation on scroll

[Waris Khan]

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,

    }

  )

});

 

[Rodrigo]

Hi @Waris Khan and welcome to the GSAP forums!

 

I suggest you to take a look at GSAP ScrollTrigger:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

It's GSAP's own scroll-controlling animation tool and works great! Here are a few demos you can look at:

https://codepen.io/collection/AEbkkJ

 

Mostly  you're looking at using ScrollTrigger with a GSAP Timeline and use the pin feature in combination with scrub. Check the docs (first link in this response) in order to see how everything works.

 

If you keep having issues, please provide a minimal demo that we can take a look at:

 

Hopefully this helps.

Happy Tweening!