Tonycre8 Posted July 7, 2020 Share Posted July 7, 2020 Hey guys, I'm trying to use GSAP along with ReactJS, and trying to get scroll trigger to work. I have some code here: import React, {useRef, useEffect} from 'react'; import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' export default function App() { //... let panels = useRef(null) var anim = gsap.to(panels, { y: 300, duration: 2 }) ScrollTrigger.create({ trigger: panels, animation: anim, start: "top center", end: "top 100px" }) } But I seem to constantly get errors. In fact, any time I don't put an animation in my useEffect() statement, it breaks my code completely. The error I'm getting is as follows: Does anyone know what I can do to fix this? And is there any way to get animations to work outside of the useEffect component? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 Hey Tonycre8. Have you tried using panels.current as your target? Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 7, 2020 Author Share Posted July 7, 2020 17 minutes ago, ZachSaucier said: Hey Tonycre8. Have you tried using panels.current as your target? Hey there, I haven't no, but panels isn't actually an array here. I managed to get it working funnily enough, but not in the way I was trying to. I had to simplify by adding the scrollTrigger property onto a gsap animation, i.e. gsap.to([panel1, panel2, panel3], { duration: 1, opacity: 1, stagger: { each: .6 }, scrollTrigger: { trigger: panels, } }) And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems. Link to comment Share on other sites More sharing options...
GreenSock Posted July 8, 2020 Share Posted July 8, 2020 Hm, it sounds like maybe you forgot to gsap.registerPlugin(ScrollTrigger) or you did so when the window was undefined(?) Did you check to see if there were any warnings in the console? And what version of ScrollTrigger/GSAP were you using? 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 8, 2020 Share Posted July 8, 2020 5 hours ago, Tonycre8 said: And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems. Everytime React renders/updates, it creates a new function, so you lose references to everything. Example usage. const [someFlag, setSomeFlag] = useState(false); const anim = useRef(null); useEffect(() => { anim.current = gsap.to(panels, { y: 300, duration: 2 }); return () => { anim.current.kill(); } }, []); // empty array to only run once useEffect(() => { // toggle animation when someFlag changes if (someFlag) { anim.current.reverse(); } else { anim.current.play(); } }, [someFlag]); And what Jack said here. You need to register the plugin or you're going to have build problems for production. 1 hour ago, GreenSock said: Hm, it sounds like maybe you forgot to gsap.registerPlugin(ScrollTrigger) or you did so when the window was undefined(?) 2 Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 8, 2020 Author Share Posted July 8, 2020 Ah okay. Yeah I've added registry for the plugins now in my useEffect statement, just to make sure that's all installed for later. useEffect(() => { if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } // ... So if I was to just make a full page, would it be a good idea to store everything in the useEffect statement? I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that. It seems like I'm overloading the useEffect, but at the same token I'm not sure what the point is adding flags and how I would trigger them. Link to comment Share on other sites More sharing options...
OSUblake Posted July 8, 2020 Share Posted July 8, 2020 2 hours ago, Tonycre8 said: I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that. Sorry for the confusion. I was just using that as an example of how you might do other animations that you need to control based on state. I didn't mean that you would need to do that for your use case. Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted July 9, 2020 Share Posted July 9, 2020 Hi @Tonycre8, I have put together this simple guide on how to use GreenSock together with React Hooks. Hope you will find it useful. Cheers 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now