scrub scroll jumps when elements pins

[brogrammer01]

Hello devs, I'm working with gsap scrollTrigger on  this practice project  and i am getting this weird scroll jump when the horizontall scroll gallery section get pinned to the viewport.  This is causing unexpected behaviors in the animation and I haven't been able to figure what the problem is. Thanks for your help in advance!

See the Pen ExOGOWV?editors=0010 by Que0 (@Que0) on CodePen

[Rodrigo]

Hi,

 

You don't have to pin the horizontal gallery container since it outermost parent <section> is already pinned. That is basically creating the issue:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".gallery-wrapper",
    start: "top top",
    end: gallery_width,
    pin: true,
    pinSpacing: 1,
    scrub: 0.5,
    invalidateOnRefresh: true
  }
});

Also pinSpacing is either a boolean or a string, so in this case most likely is getting coerced into true:

!!1 // -> true

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion

 

This seems to work the way you expect:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".gallery-wrapper",
    start: "top top",
    end: gallery_width,
    scrub: 0.5,
    invalidateOnRefresh: true
  }
});

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

 

Hopefully this helps.

Happy Tweening!

[brogrammer01]

15 hours ago, Rodrigo said:

Hi,

 

You don't have to pin the horizontal gallery container since it outermost parent <section> is already pinned. That is basically creating the issue:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".gallery-wrapper",
    start: "top top",
    end: gallery_width,
    pin: true,
    pinSpacing: 1,
    scrub: 0.5,
    invalidateOnRefresh: true
  }
});

Also pinSpacing is either a boolean or a string, so in this case most likely is getting coerced into true:

!!1 // -> true

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion

 

This seems to work the way you expect:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".gallery-wrapper",
    start: "top top",
    end: gallery_width,
    scrub: 0.5,
    invalidateOnRefresh: true
  }
});

 

 

 

Hopefully this helps.

Happy Tweening!

 

 

It helps, thanks