[GSAP ScrollTrigger + wordpress/elementor section jump]

Hello Akapowl, sorry for the late reply. I did check what you suggested and you hit the nail on the head. I made some tweaks in my css and it worked.

Thank you 

[GSAP ScrollTrigger + wordpress/elementor section jump]

Thanks for your reply. 

I am using wordpress + elementor. Before deploying my code there I tried it on CodePen and everything worked fine, but once i tried to recreate the same thing on my project it didn't go well as you can see in the video.

[GSAP ScrollTrigger + wordpress/elementor section jump]

Hi ,

I hope this message finds you well. I'm currently working on a project that involves a horizontal scroll effect using GSAP (GreenSock Animation Platform). The animation looks visually appealing, but I've encountered a peculiar issue that I'm seeking advice on.

 

The Problem:

 

Towards the end of the animation, I've noticed that the section containing the horizontal scroll jumps or moves unexpectedly. I've carefully set up the trigger and pin elements, and the animation seems to work well until this point. However, the final moments of the animation are not as smooth as I'd like them to be.

 

Have a look : https://streamable.com/5qptc3

 

Code Overview:

 

I'm using the following code structure for the animation:

  // Reusable function for GSAP Animation
function setupHorizontalScrollAnimation(containerId, sectionId, imageListId) {
  const container = document.getElementById(containerId);
  const  section = document.getElementById(sectionId);
  const imageList = document.getElementById(imageListId);
  const images = imageList.querySelectorAll('img');

  // Calculate the total width of all images

  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      start: 'center center',
      end: () => `+=${images.length * 100}%`, // Adjust the end value based on the number of images
      pin: section,
      scrub: 0.2,
      markers: true,
      pinspacing: false
    },
  });

  timeline.to(images, {
    xPercent: -100 * (images.length - 1),
    ease: 'none',
  });
}

// Apply the animation to each section
setupHorizontalScrollAnimation('containerAround1', 'parcours-therap', 'imageList1');
setupHorizontalScrollAnimation('containerAround2', 'plan-traitement', 'imageList2');