Jump to content
Search Community

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

jacobfreedom test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...