Using ScrollTriggers in Next.js with useGSAP()

[kacperkodo]

Hello!
I think I got trouble understanding how should I use GSAP in my Next.js project, in particular, ScrollTriggers, how to initialize and kill them on resize and pathname change. 

Let me share you my component (it's a Prismic slice in case you wonder about the syntax). I removed some parts which are irrelevant. 

The aim of this code is to pin the smaller "intro" div, until we scroll through the whole container. Then it sticks to the bottom of it. 
This code actually works, but I've got a couple problems with it. 

1. Resizing works really slow. It feels like a lot of stuff is happening in the background and it feels wrong. But it still kinda works.
2. Second issue is major and it's blocking me from going further. The line that kills ScrollTriggers applies to all the ScrollTriggers across the projects, including those from other components!

How should I set it up properly? I will appreciate any advice!
 

'use client';

import { useRef } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import { useGSAP } from '@gsap/react';


const Values = ({ slice }: ValuesProps): JSX.Element => {
  const container = useRef<HTMLDivElement>(null);
  const intro = useRef<HTMLDivElement>(null);

  const setupSTs = (offset: number) => {
	// I don't need a pin on mobile screens <= 768
    if (window.innerWidth > 768) {
      ScrollTrigger.create({
        trigger: container.current,
        start: 'top top',
        end: `bottom bottom-=${offset}`,
        pin: intro.current,
      });
    }
  };

  const initSTs = () => {
	// This line breaks my other components, but if I disable it, resizing for this component doesn't work anymore
    ScrollTrigger.getAll().forEach((ST) => ST.kill());

    if (intro.current) {
      let introHeight = intro.current.clientHeight;
      let offset = window.innerHeight - introHeight;
      setupSTs(offset);
    }
  };

  // Is it a correct use of useGSAP?
  useGSAP(
    () => {
      gsap.registerPlugin(ScrollTrigger);
      initSTs();
      ScrollTrigger.addEventListener('refreshInit', initSTs);
    },
    { scope: container }
  );

  return (
    <section
      ref={container}
    >
      <div className={styles.values__wrapper}>
        <div ref={intro} className={styles.values__intro}>
         (...)
        </div>

        <div className={styles.values__container}>
          (...)
        </div>
      </div>
    </section>
  );
};

export default Values;

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[kacperkodo]

The demo can be seen here: https://bethebuzz.vercel.app/careers It's the second section after hero, with the Values box pinned on Scroll. It works, but I know that code is wrong. I just don't understand how to use it properly. 

[GSAP Helper]

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

[kacperkodo]

AI everywhere, blah... 

Is assigning ScrollTrigger to ref a right approach? 

 

let triggerRef = useRef<ScrollTrigger>();

(...)

triggerRef.current = ScrollTrigger.create({
	trigger: container.current,
    start: 'top top',
	end: `bottom bottom-=${offset}`,
    pin: intro.current,
});

(...)

if (triggerRef.current) {
	triggerRef.current.kill();
}

 

[mvaneijgen]

Hi @kacpergalka, no AI here.

 

We just have forum guide lines and instead of wasting time, we have some pre programmed messages, for users who have not read the guidelines or have forgot to include a minimal demo. 

 

5 minutes ago, kacpergalka said:

Is assigning ScrollTrigger to ref a right approach? 

I've never seen this, might be fine, but I'm no React expert. Personally I can't judge code without seeing it in action. If you post a minimal demo we'll be happy to take a look at your setup.

 

We have all kinds of Stackblitz starter templates, React (please read this article!) or Next if you want to see what a basic setup looks like and if you still have questions you can directly create your minimal demo in there and share it here. Hope it helps and happy tweening! 

[kacperkodo]

Thanks for the real human reply @mvaneijgen 
My question is more about the principles of working with GSAP and React, not about debugging my part of code to make it work - because it basically works. My sample is really simple...
I just wonder If I should kill all the ScrollTriggers somehow? Or useGSAP handles it all? 

 

[Rodrigo]

Hi,

 

The article Mitchel points to has all the information on the particular subject:

https://gsap.com/resources/React

 

Also @Cassie created this video explaining all the ins and outs of the hook, you should really see it:

 

Finally here are a couple of demos that use ScrollTrigger in React apps:

https://stackblitz.com/edit/react-cxv92j

 

https://stackblitz.com/edit/vitejs-vite-d73sck

 

Hopefully this helps.

Happy Tweening!