Horizontal scroll inside a pinned div

[delios]

Hello!

 

I have this (in the codepen) ScrollTrigger landing page, at the very bottom of the script I commented a line "Breaks the thing", well if you remove the following lines, it ... un-breaks the thing. So what I want is an horizontal scroll of cards. I figured out I'd pin another container and make it horizontal but that doesn't really work apparently, plus it breaks all. I'm really new to horizontal scrolling (and GSAP lol) and this is probably a big logical mistake, if you have any lead on how to do that, I'll take it

 

Thank you

See the Pen xxyrbjQ by deliqs (@deliqs) on CodePen

[Rodrigo]

Hi,

 

You have a logic issue here:

tlSerenite.to(sereniteContainer, {
  xPercent: -100,
  x: () => 2000,
  ease: "none",
  scrollTrigger: {
    trigger: this.sereniteSectionTarget,
    start: "top top",
    end: "+=2000"
    scrub: 1,
    pin: true
  }
});

So basically you're adding ScrollTrigger to a GSAP instance that is controlled by a GSAP Timeline as well (which is also tied to a ScrollTrigger instance). So which one has control over that instance? The timeline you created whose progress is controlled by ScrollTrigger or the ScrollTrigger instance in the final GSAP instance? See where this goes wrong?

 

Just remove the scrollTrigger object from this instance and everything seems to work the way you expect:

tlSerenite.to(sereniteContainer, {
  xPercent: -100,
  x: () => 2000,
  ease: "none",
});

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[delios]

On 4/29/2023 at 1:49 AM, Rodrigo said:

Hi,

 

You have a logic issue here:

tlSerenite.to(sereniteContainer, {
  xPercent: -100,
  x: () => 2000,
  ease: "none",
  scrollTrigger: {
    trigger: this.sereniteSectionTarget,
    start: "top top",
    end: "+=2000"
    scrub: 1,
    pin: true
  }
});

So basically you're adding ScrollTrigger to a GSAP instance that is controlled by a GSAP Timeline as well (which is also tied to a ScrollTrigger instance). So which one has control over that instance? The timeline you created whose progress is controlled by ScrollTrigger or the ScrollTrigger instance in the final GSAP instance? See where this goes wrong?

 

Just remove the scrollTrigger object from this instance and everything seems to work the way you expect:

tlSerenite.to(sereniteContainer, {
  xPercent: -100,
  x: () => 2000,
  ease: "none",
});

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

Oh, yeah that makes a lot of sense, still playing with GSAP stuff and while surfing the forums, I see there are a lot of logic issue like this one which I guess makes sense within such a powerful tool 🤷‍♂️ Thank you very much for your help!!