ScrollTriggrer inside a pinned scrolltrigger

[popland]

I'm trying to make a "pinned" section structure (as for the example in documentation), it works pretty good, unless i add something inside a section and i animate it with another scrolltrigger.
First section is correct, also the scrolltrigger animation of its content, but when i reach the second section a "blank" with the size of the page itslelf appear on the left. If i remove the scrolltrigger animation inside everything is working correctly

at this url you can see an example:

https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset

as you can see the "hello" text is growing as you scroll, but when the second section take over, the horizontal bar appear

 gsap.to(".txt", {
        scrollTrigger: {
          trigger: ".txt",
          scrub: true,
          start: "middle top",
          markers: true,
          pin: true,
          pinSpacing: false,
        },
        scale: 6,
        duration: 1,
      });

 

if i comment or remove the code above and it works again (i also tried to modify it with various pin combination with no luck)

 

i guess there is something about having a scrolltrigger inside a pinned scrolltrigger that i cant figure out 

 

any suggestion?

[giovannimalausa]

Hey, your link takes here!

 

 

[popland]

can you try this one? im able to open it with an incognito window

https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset?file=/pages/index.js:1,1

[Rodrigo]

Hi,

 

You are animating an element using ScrollTrigger that is inside a pinned element, so you have to consider that particular offset using pinnedContainer. Also you have nested pinning, that is an element pinned inside a parent element (somewhere up the DOM tree) that is also pinned. That could cause some issues down the line and since you're adding an extra element (a pin spacer element) you're creating horizontal overflow.

 

Also you have  a syntax error in your start point string:

// Incorrect
start: "middle top",
  
// Correct
start: "center top",

In this case is just better to either don't pin the text element and pin the parent:

panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top",
    pin: true,
    pinSpacing: i > 0 ? false : true,
    markers: true,
  });
});
gsap.to(".txt", {
  scrollTrigger: {
    trigger: ".txt",
    scrub: true,
    start: "top top",
    markers: true,
    id: "text",
  },
  scale: 6,
  duration: 1,
});

Although my approach would be to create the animation inside the panel loop. Instead of creating a ScrollTrigger instance, create a Tween or Timeline with that specific ScrollTrigger configuration if the panel has that specific children:

panels.forEach((panel, i) => {
  // you could look at a data attribute or something else
  if (panel.dataset.hasChild) {
    gsap.to(".txt", {
      scrollTrigger: {
        trigger: panel,
        start: "top top",
        // By default pin spacing is true
        pin: true,
        markers: true,
        scrub: true,
      },
      scale: 6,
    });
  } else {
    ScrollTrigger.create({
      trigger: panel,
      start: "top top",
      pin: true,
      pinSpacing: false,
      markers: true,
    });
  }
});

Finally the simplest way to remove the horizontal scroll bar is to just add Tailwind's overflow-hidden to that parent element:

<section className="panel w-full h-screen bg-slate-400 overflow-hidden">
  <div className="flex justify-center h-screen w-full items-center txt">
    HELLO
  </div>
</section>

Hopefully this helps.

Happy Tweening!

[popland]

Thank you! will look into it, i think i will follow your last advice

not much in favour of 'overflow-hidden" solution, was hoping not to have a the scrollbar in a native way, but in any case i will try it too,