Horizontal scroll / Nextjs | ScrollTrigger don't end at the right point and loop item inside twice

[Masta]

Hi,

 

I have already used nextjs and GSAP together on other projects especially for a horizontal scroll for landing pages and it works without any problem

However, for a new project I need to use the scroll only on one section and that's where my problem starts. 

 

I have read the documentation about the scrollTrigger and its properties, I have skimmed the GSAP forums as well as the different sandboxes and codepens but nothing to do, I'm stuck! The best result I could get is the one you see here and in the sandbox .... 

 

https://codesandbox.io/p/github/Masta2000/Test-/draft/trusting-field?file=%2Fcomponents%2FHome%2FResults%2Findex.tsx&selection=[{"endColumn"%3A4%2C"endLineNumber"%3A19%2C"startColumn"%3A4%2C"startLineNumber"%3A19}]

 

useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    ScrollTrigger.defaults({
      markers: { startColor: "green", endColor: "red" },
    });

    let sections = gsap.utils.toArray(".item");
    const container: HTMLElement = document.querySelector(".wrapper")!;

    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        pin: true,
        pinnedContainer: container,
        trigger: container,
        scrub: 0.5,
        end: () => "+=" + `${container.offsetWidth}`,
        onEnter: () => console.log("in"),
        onLeave: () => console.log("out"),
      },
    });

    ScrollTrigger.refresh();
  }, []);

 

I don't understand why my scroll doesn't stop at the end of my container as I think I told it to and also why it duplicates the element on which the scroll is applied twice 😕

 

Besides, I don't really understand why either, I tested the pinnedContainer property which allows me to have the horizontal scroll because without it it doesn't work, for me it should because on my other works I didn't need to use this property at all but now it becomes indispensable and I would like to understand why in my case. 

 

Here it is, I don't think that the problem comes from next or something else but we are never safe from a surprise and maybe someone more erudite than me on GSAP will be able to help me to see it more clearly 🥸

 

Thanks in advance and have a nice day 🙂

 

[Cassie]

Hello there mate!

 

So I'm afraid I can't edit this sandbox, it says it's read only.

There will be a lot of good bits of info in the article for you though - 

 

 

The main takeaways will be to use gsap.context() to wrap up all your animations, React 18 double-invokes effects (which could be leading to the duplicating issue you mentioned)

 

If you can make the sandbox editable I can have a little mess around and show you how I'd set this up.

 

[Masta]

Hi Cassie thanks for your help  

 

I'll try to make it but codesandbox for Nextjs is in beta and lock the edit mod ....have no solution to make it editable for now and i try other solution but have error all time when i try to reproduce my environment and lost my afternoon on it (if u have account on codesandbox u can fork the project for test some things but i understand if u won't) 😅 ! Anyway we have the code in the sandbox can u just explain me how u use gsap.context in my case and can solved my problem 🥺 I see the documentation about it and try to implement it but i don't understand his implementation in my code, i try some things but no one works 

 

https://codesandbox.io/p/sandbox/test-sfopos

 

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    ScrollTrigger.defaults({
      markers: { startColor: "green", endColor: "red" },
    });

      let sections = gsap.utils.toArray(".item");
      const container: HTMLElement = document.querySelector("#test111")!;

      let ctx = gsap.context(() => {
        gsap.to(sections, {
          xPercent: -100 * (sections.length - 1),
          ease: "none",
          scrollTrigger: {
            pin: true,
            pinnedContainer: container,
            trigger: container,
            scrub: 0.5,
            end: () => "+=" + `${container.offsetWidth}`,
            onEnter: () => console.log("in"),
            onLeave: () => console.log("out"),
          },
      }, container);
 	});
    
   return () => ctx.revert();
   
  }, []);

 

Thanks for your help ^^ 

[Rodrigo]

Hi,

 

This is a super simple example for using GSAP & ScrollTrigger in a NextJS setup:

https://stackblitz.com/edit/nextjs-5cm4qn?file=pages%2Findex.js

 

What really confuses me about your examples is that I can see two different scroll bars to the right of the screen:

 

Finally the code snippet you posted is the right way to use GSAP Context in a React app. Just keep in mind that Next also runs on the server, so you'll get a warning about useLayoutEffect. Is better to use this little tool:

const useIsomorphicLayoutEffect = typeof window !== "undefined" 
  ? useLayoutEffect 
  : useEffect;

// Then in your React component

useIsomorphicLayoutEffect(() => {
  const ctx = gsap.context(() => {}, scopeRef);
  return () => ctx.revert();
}, []);

Hopefully this makes things clearer.

 

Happy Tweening!

[Masta]

Hi,

 

Thx Cassie and Rodrigo 😁 superheroes are real !! it's works like a charm  

 

have a good day and a great weekend 😎

[Cassie]

Thanks for popping back to say thanks! 🥰