How to use custom ScrollTrigger animations with this?

[opr-inzn]

I have a project now that uses this code in a NextJS component:

 useLayoutEffect(() => {
        const ctx = gsap.context(() => {
            gsap.to(projectContainer.current, {
                x: -projectContainer.current!.scrollWidth + window.innerWidth,
                scrollTrigger: {
                    trigger: projectWrapper.current,
                    start: "top top",
                    end: "+=" + (projectContainer.current!.scrollWidth - window.innerWidth),
                    scrub: 1,
                    pin: true,
                    markers: true,
                },
            });
        });

        return () => ctx.revert();
    }, []);

However, although I am importing {GSAP} in my root layout (as shown in the demo), I need to import this as well in the component, otherwise it won't run

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/all'
import { useLayoutEffect, useRef } from 'react'

gsap.registerPlugin(ScrollTrigger)

Is this how it’s intended? Or am I missing something? Thanks in advance!

[clementroche]

Take a look at this https://github.com/darkroomengineering/satus/tree/main/docs/gsap

<GSAP scrollTrigger /> will take care of ScrollTrigger register and sync with Lenis