How can I add a custom React function to GSAP? Custom scrollTriger moveTo function, .call doesn't work... Type error

[jacobfreedom]

I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console:

App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo')

This is  the code:

 

import gsap from "gsap";

import ScrollTrigger from "gsap/dist/ScrollTrigger";

import { ReactLenis, useLenis } from "@studio-freight/react-lenis";

 

gsap.registerPlugin(ScrollTrigger);

 

const App = () => {

const lenis = useLenis(({ scroll }) => {

// called every scroll

});

 

const [showSpan, setShowSpan] = useState(true);

 

const mainTitleRef = useRef(null);

const secondaryTitleRef = useRef(null);

const wavingHandRef = useRef(null);

 

const section1Ref = useRef(null);

const section2Ref = useRef(null);

 

useLayoutEffect(() => {

pinSection();

animateTitles();

 

return () => {

// Cleanup code when the component unmounts

ScrollTrigger.getAll().forEach((trigger) => trigger.kill());

};

}, []); // Empty dependency array to run once after the initial render

 

const pinSection = () => {

// Pin the section when it enters the viewport

ScrollTrigger.create({

trigger: section1Ref.current,

start: "top top",

end: "1200 top",

pin: true,

markers: true,

onLeave: () => {

gsap.to(section1Ref.current, {

opacity: 0,

duration: 1,

onComplete: scrollToSection2,

}); // Set opacity to 1 when entering the trigger

// scrollToSection2();

// gsap.add( function(){ scrollToSection2(); } )

},

onEnterBack: () => {

gsap.to(section1Ref.current, { opacity: 1, duration: 1 });

},

});

};

 

const scrollToSection2 = () => {

lenis.scrollTo(section2Ref.current, { duration: 5 });

};

As you can see scollToSection2 is a React function. 

Thank you for your help upfront!

[GreenSock]

That looks like Lenis code, unrelated to GSAP. We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines). 

 

If you need any GSAP-related help, just make sure you provide a minimal demo, like a Stackblitz or CodePen that clearly illustrates the issue and we'd be happy to take a peek. It's just much more difficult to glance at an excerpt of code and try to troubleshoot - we need to see the problem in context. Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j

 

Make sure you're doing proper cleanup. It looks like you're not. I'd recommend looking at the info at https://gsap.com/react and maybe our new hook that we'll be announcing soon: https://www.npmjs.com/package/@gsap/react

 

Good luck!