GSAP ScrollTrigger horizontal scroll pinSpacing problem when adding an top value for an early start

[AbzoHQ]

I’m trying to build a horizontal scroll effect with GSAP + ScrollTrigger.
The idea is: when you scroll vertically, the text moves horizontally across the screen.

It works fine when the scrollTrigger config is like that 

 

scrollTrigger: {
    trigger: trackSectionRef,
    start: "top top",
    scrub: true,
    pin: true,
    markers: true,
    anticipatePin: 1,
    invalidateOnRefresh: true,
  },

But whenever I change the start to be "-30% top", the pin spacer adds an annoying white space on the top, tried several solutions, but all of them messed up something in the animation, maybe the problem is that I'm new to GSAP. What I want to achieve, is for the horizontal scroll to start before  the scroll section is pinned. And at the same time, I want the scroll section to be pinned correctly without any white spaces, would appreciate your take on the matter.

Here is the code :

See the Pen XJmxOXM by abdelrahmanahmed04 (@abdelrahmanahmed04) on CodePen.

[Rodrigo]

Hi @AbzoHQ and welcome to the GSAP Forums!

 

9 hours ago, AbzoHQ said:

But whenever I change the start to be "-30% top", the pin spacer adds an annoying white space on the top, tried several solutions, but all of them messed up something in the animation, maybe the problem is that I'm new to GSAP.

That is completely expected actually. A start point "-30% top" means when the top of the element minus 30% hits the top of the viewport, by design -30% is above the top of the element so it will reach that particular point before it hits the top of the viewport. If you need the previous section to remain visible while the horizontal section is pinned, you need to wrap that section and the horizontal one in a common ancestor and pin that element, as shown in these demos:

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

 

 

[AbzoHQ]

12 hours ago, Rodrigo said:

If you need the previous section to remain visible while the horizontal section is pinned,

Thanks for your response, but this isn't what I want to achieve, I want the horizontal scroll effect to start at -30% top, but I want the horizontal scroll section to be pinned at top top. Basically I want the horizontal scroll to start before the section is pinned, and I want it to continue scrolling after the section is pinned as well

[AbzoHQ]

Thanks for you help, I figured out how to fix it, I set pin to false for the scroll trigger responsible for the horizontal animation and the start as -30% top, and then created a new trigger just for pinning and set its start for top top. This resulted in the scroll animation to start before the pinning

[Rodrigo]

Yeah, that sounds like the best approach, one ScrollTrigger for the animation and another for pinning the element. Keep in mind that you can use the end point of one in the other in order to keep everything in perfect sync (if you want both instances to end at the same time), like this:

// Horizontal Animation
const t = gsap.to(target, {
  // ....
  scrollTrigger: {
    // ...
  },
});

// ScrollTrigger instance that pins the element
ScrollTrigger.create({
  trigger: element,
  // ...
  // Ends at the same scroll position as the other ScrollTrigger instance
  end: t.scrollTrigger.end
});

Hopefully this helps

Happy Tweening!