scrollTrigger pin not working correctly in next js

[unni]

i am trying to pin a heading but it works fine on codepen but its not working correctly in my next js  .

what i am trying to do is in this video .

This is the next js demo next js demo   
https://stackblitz.com/edit/stackblitz-starters-48lpow?file=app%2Fpage.tsx


if anyone knows please help.

See the Pen wvNEjZo by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen

[unni]

Anyone please help if knows .

[GSAP Helper]

Please be patient. We strive to answer all topics within a day, but this may take longer if it's busy in these free forums or the topic is especially complex. 

[unni]

10 minutes ago, GSAP Helper said:

Please be patient. We strive to answer all topics within a day, but this may take longer if it's busy in these free forums or the topic is especially complex. 

I wait

[Rodrigo]

Hi,

 

The reason is not working is the timeout you have there. Any particular reason for that? Without the timeout the heading ScrollTrigger seems to work.

 

Also the HTML and CSS in both demos are a bit different and so are the ScrollTrigger configurations, so each demo has a different setup, different ScrollTriggers, which leads to different results. So is not really clear to me if you want the Next demo to look like the codepen or the other way around.

 

Any way this seems to work in the Stackblitz demo:

useLayoutEffect(() => {
  let panels = gsap.utils.toArray('.panel');
  let ctx = gsap.context(() => {
    panels.forEach((panel: any, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: () =>
        panel.offsetHeight < window.innerHeight
        ? 'top top'
        : 'bottom bottom',
        pin: true,
        pinSpacing: false,
        markers: true,
        id: 1,
      });
    });

    // setTimeout(() => {
    gsap.to('.project-heading', {
      scrollTrigger: {
        trigger: '.project-heading',
        pin: true,
        markers: { indent: 200 },
        id: 2,
        start: 'bottom bottom',
        end: 'bottom center',
        pinSpacing: false,
      },
    });
    // }, 3000);
  }, []);
  return () => ctx.revert();
}, []);

https://stackblitz.com/edit/stackblitz-starters-8jmcl9

 

Finally we have a new React tools, a custom useGSAP hook that aims to simplify the usage of GSAP in effect hooks, have a look at it:

https://www.npmjs.com/package/@gsap/react

 

Hopefully this helps.

Happy Tweening!

[unni]

7 hours ago, Rodrigo said:

Hi,

 

The reason is not working is the timeout you have there. Any particular reason for that? Without the timeout the heading ScrollTrigger seems to work.

 

Also the HTML and CSS in both demos are a bit different and so are the ScrollTrigger configurations, so each demo has a different setup, different ScrollTriggers, which leads to different results. So is not really clear to me if you want the Next demo to look like the codepen or the other way around.

 

Any way this seems to work in the Stackblitz demo:

useLayoutEffect(() => {
  let panels = gsap.utils.toArray('.panel');
  let ctx = gsap.context(() => {
    panels.forEach((panel: any, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: () =>
        panel.offsetHeight < window.innerHeight
        ? 'top top'
        : 'bottom bottom',
        pin: true,
        pinSpacing: false,
        markers: true,
        id: 1,
      });
    });

    // setTimeout(() => {
    gsap.to('.project-heading', {
      scrollTrigger: {
        trigger: '.project-heading',
        pin: true,
        markers: { indent: 200 },
        id: 2,
        start: 'bottom bottom',
        end: 'bottom center',
        pinSpacing: false,
      },
    });
    // }, 3000);
  }, []);
  return () => ctx.revert();
}, []);

https://stackblitz.com/edit/stackblitz-starters-8jmcl9

 

Finally we have a new React tools, a custom useGSAP hook that aims to simplify the usage of GSAP in effect hooks, have a look at it:

https://www.npmjs.com/package/@gsap/react

 

Hopefully this helps.

Happy Tweening!

but when i remove the setTimeout, i get  gsap-core.js:92 GSAP target .project-heading not found.
Element not found: .project-heading

i changed to exactly like in your code but  still.
https://stackblitz.com/edit/stackblitz-starters-48lpow?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter

Edited December 2, 2023 by unni

[GreenSock]

Are you trying to do this?:

https://stackblitz.com/edit/stackblitz-starters-txuq4o?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter

 

You've got a very complicated setup there actually. Notes: 

1. You defined the scope of the gsap.context() incorrectly (an Array instead of a valid ref or element)
2. If you're going to pin something that's inside a container that you also pin, you must define the pinnedContainer
3. If you're pinning something inside a pinned container, you'll probably need to use pinType: "transform" because if you have position: fixed inside of an element that has a transform applied (which is necessary for pinning that container), browsers make position: fixed relative to that container with the transform applied (it creates a new stacking context). That's not related to GSAP - it's just how the spec defines things. 
4. I believe Next.js renders things sometimes BEFORE the window/document exist, but those must exist in order to properly register the ScrollTrigger plugin, so make sure you call gsap.registerPlugin() after the window/document exist. So inside the useLayoutEffect() for example. 
5. I implemented the brand new useGSAP() hook from the @gsap/react package to make things easier.

I hope that helps. 

[unni]

7 hours ago, GreenSock said:

Are you trying to do this?:

https://stackblitz.com/edit/stackblitz-starters-txuq4o?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter

 

You've got a very complicated setup there actually. Notes: 

1. You defined the scope of the gsap.context() incorrectly (an Array instead of a valid ref or element)
2. If you're going to pin something that's inside a container that you also pin, you must define the pinnedContainer
3. If you're pinning something inside a pinned container, you'll probably need to use pinType: "transform" because if you have position: fixed inside of an element that has a transform applied (which is necessary for pinning that container), browsers make position: fixed relative to that container with the transform applied (it creates a new stacking context). That's not related to GSAP - it's just how the spec defines things. 
4. I believe Next.js renders things sometimes BEFORE the window/document exist, but those must exist in order to properly register the ScrollTrigger plugin, so make sure you call gsap.registerPlugin() after the window/document exist. So inside the useLayoutEffect() for example. 
5. I implemented the brand new useGSAP() hook from the @gsap/react package to make things easier.

I hope that helps. 

very helpfull . and the useGSAP() hook is good.