ScrollTrigger Issue: Pinning columns inside rows always jump to the end, instead of pinning and sticking with the flow.

[Ken Flores]

Hey all! I work with the theme DIVI for Wordpress and have so many issues using GSAP ScrollTrigger Pin, i think its me because it happens to me all the time even in Scratch HTML projects, But pinning is always buggy to me and I must be missing something.  Here Im trying to have my left column be pinned so I can have the right column scroll through other stuff I want to show. But it is jump pinning, so I have to figure that out first! 

Here is the ScrollTrigger Code I used, Obviously cant use CodePen because its in Wordpress! 

ScrollTrigger.create({
  
    trigger: '.csb',
    start: 'top center',
    end: '+=500',
  scrub: true, 
  pin: true, 
    markers: true, 
  
  });
         

[GSAP Helper]

Without a minimal demo, it's super difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. I know you're in Wordpress, but are you able to reproduce the issue inside a CodePen or Stackblitz? Or at the very least, share the URL that shows the problem?

 

My best guess is you've got some kind of competing ScrollTrigger or you're creating things out of order or you're pinning a container higher up without defining pinnedContainer. It's impossible to know without seeing the rest of your code and the context. 🤷‍♂️

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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

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

[Rodrigo]

Hi,

 

Indeed is really hard to see the issue based on a video. The only thing I can think of is that a parent of the element being pinned has a transform applied either by GSAP, DIVI or something else. Normally that leads to unexpected pinning behaviour.

 

Happy Tweening!

[Ken Flores]

@GSAP Helper @Rodrigo Since its divi builder I am unable to fork it! BUT I have made a link live for us to be able to explore what the problem is! I have debugged a lot of it to my code, I had a timeline playing wrongly, but Im still getting jumpy Animations when pinning. Fork below of a brief example! IN smaller vh it works somewhat right, but everything should end as center, but when vh is larger screens, it jumps! 

See the Pen xxBYPEV by Ken-Flores (@Ken-Flores) on CodePen

[Rodrigo]

Hi,

 

I think there is something in your HTML/CSS setup that's causing this but unfortunately we don't have the time resources to comb through all that and see what could be the issue.

 

This demo is clearly working as you can see without any issues:

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

 

So my suggestion would be to start tweaking that until you find the culprit. Maybe start section by section of your layout and see when exactly this becomes an issue.

 

Sorry I can't be of more assistance.

Happy Tweening!