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, } ) });