urgent GSAP ScrollTrigger + wordpress/elementor section jump

[bakhabikh]

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');

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[bakhabikh]

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.

[akapowl]

Welcome to the forum!

In that video you attached, it very much looks like you have CSS transitions applied on elements that are affected by ScrollTrigger.

Themes like Elementor often apply something like

transition: all .3s

to lots of elements - those will interfere with GSAP, so you'll have to make sure to overwrite them in your custom CSS.
 

On top of that I would also make sure to overwrite the scroll-behaviour to auto because if I recall correctly, Elementor will by default set it to smooth, which can also interfere with your scroll related JS at some point.

I hope this will help already. If it doesn't, unfortunatelly we won't be able to help without a minimal demo clearly demonstrating your issue.

Good luck.
 

[bakhabikh]

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 

[Grappa]

I understand why you want to see a minimal demo, in some cases this is not possible, because GSAP is used with Wordpress/Elementor for example.
I am all the more pleased that you are still trying to find solutions, as in this case. That saved my project, so a big THANK YOU!
I think there are many Elementor/GSAP users, it's a nice combination!

[Level Up Studios]

@akapowl Thank you so much for this. I've been wracking my brains for the last couple of days trying to figure out why my scrolling animation was jumping at the end in WordPress Elementor however, I didn't realize the issue was a transition CSS effect being applied to the container by Elementor itself. I added

selector {
  transition: none;
}

directly to the container with the GSAP ScrollTrigger animation and it resolved my issue. No more jumping!!