newguy123 Posted November 13, 2023 Share Posted November 13, 2023 Hi I'm going through these pens from other threads, which work fine as is, however I'm having a hard time converting them to React version. See the Pen VwgevYW by GreenSock (@GreenSock) on CodePen See the Pen abRmemz by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 Errors I get in the console when I try to convert to to React: scrolltrigger cannot read properties of undefined (reading 'left') Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 I'm seeing how to create a stackblitz account to get a pen going on it for easier explanation... Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 OK this doesnt work and throws errors, but besides that, this is my 1st stackblitz share so hopefully I'm doing that correctly at least: https://react-i9fqyh.stackblitz.io So the majority of the code in App.js, is more or less copied and pastes as is from the 1st pen in my 1st post in this thread. Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 13, 2023 Share Posted November 13, 2023 Hey, if you're using React make sure you read this article! And when sharing a Stackblitz link make sure you share the edit url with a link to the file you've put your GSAP code in https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js. If I look at this url I see three boxes moving the the right on scroll, so it seems to be working? Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 I think I prefer codesandbox to stackblitz. Here same thing as above (not working),but on codesandbox. It gives better error info I think. Can sombody please help me convert the example properly to React https://zrcv35.csb.app/ Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 10 minutes ago, mvaneijgen said: Hey, if you're using React make sure you read this article! And when sharing a Stackblitz link make sure you share the edit url with a link to the file you've put your GSAP code in https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js. If I look at this url I see three boxes moving the the right on scroll, so it seems to be working? no then I must have shared the wrong stackblits link. Look and my codesandbox link instead please Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 ah seems I need a pro account to share codesandbox this is so frustrating. OK let me revert to stackblitz and see how to share my correct link..... Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 ok this seems to be my correct stackblitz link now (apologies for the mixup) https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 13, 2023 Share Posted November 13, 2023 I think you had not clicked save on the file before sharing. The original file you started with had the correct setup and I think you just removed everything and copied over the AirPods demo. In React you need to do proper cleanup in the useLayoutEffect function. I don't use React myself, but everything is explained in the example I've shared. My suggestion would be start with one of our React templates and copy over the logic you want one by one until something breaks. Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 57 minutes ago, mvaneijgen said: I think you had not clicked save on the file before sharing. The original file you started with had the correct setup and I think you just removed everything and copied over the AirPods demo. In React you need to do proper cleanup in the useLayoutEffect function. I don't use React myself, but everything is explained in the example I've shared. My suggestion would be start with one of our React templates and copy over the logic you want one by one until something breaks. the problem is that those examples are simple little squares ande circles and getting directly animated, where the airpods thing has its own function doing things. Its that function I'm having a hard time with to convert to React. Its getting the context of the canvas in the function, when the canvas is returned in the app, but the function is not seeing it for some reason Link to comment Share on other sites More sharing options...
newguy123 Posted November 13, 2023 Author Share Posted November 13, 2023 Ive added the imageSequence inside the gsap.context inside useLayoutEffect, but it still doesnt know what canvas is... Link to comment Share on other sites More sharing options...
Rodrigo Posted November 13, 2023 Share Posted November 13, 2023 Hi, Sorry to hear about the troubles, but unfortunately we don't have the time resources to create this demo at this moment in React, but you're making some fundamental errors that most likely are causing the issues you're seeing. First, when using animations in React, the React team recommends using the useLayoutEffect hook, in your code you have the helper function and then you execute the helper function in the global scope of the React component, at that point the DOM is not yet rendered, so there is no element to actually animate. This is mostly an issue with basic React concepts that, of course, gets into a GSAP issue since you're also not paying attention to the resources Mitchel has linked twice already in this thread. The React basics article is there for a reason and I strongly recommend you to read it in order to learn how to use GSAP in React apps, but first be sure to understand how a React component works and how to use the effect hooks (useEffect and useLayoutEffect) properly. Good luck with your project. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 13, 2023 Solution Share Posted November 13, 2023 Maybe this will help nudge you in the right direction: https://stackblitz.com/edit/react-6u8izj?file=src%2FApp.js 1 Link to comment Share on other sites More sharing options...
newguy123 Posted November 14, 2023 Author Share Posted November 14, 2023 19 hours ago, GreenSock said: Maybe this will help nudge you in the right direction: https://stackblitz.com/edit/react-6u8izj?file=src%2FApp.js Thanks Jack. Got pretty close to this, I just didnt add the initial framecount and url array into the useLayoutEffect ...and also forgot to import the ScrollTrigger from gsap/ScrollTrigger On 11/13/2023 at 3:41 PM, mvaneijgen said: Hey, if you're using React make sure you read this article! And when sharing a Stackblitz link make sure you share the edit url with a link to the file you've put your GSAP code in https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js. If I look at this url I see three boxes moving the the right on scroll, so it seems to be working? Thanks, I looked at some of those. Probably needed to look at some of the more complex examples further down the page 23 hours ago, Rodrigo said: Hi, Sorry to hear about the troubles, but unfortunately we don't have the time resources to create this demo at this moment in React, but you're making some fundamental errors that most likely are causing the issues you're seeing. First, when using animations in React, the React team recommends using the useLayoutEffect hook, in your code you have the helper function and then you execute the helper function in the global scope of the React component, at that point the DOM is not yet rendered, so there is no element to actually animate. This is mostly an issue with basic React concepts that, of course, gets into a GSAP issue since you're also not paying attention to the resources Mitchel has linked twice already in this thread. The React basics article is there for a reason and I strongly recommend you to read it in order to learn how to use GSAP in React apps, but first be sure to understand how a React component works and how to use the effect hooks (useEffect and useLayoutEffect) properly. Good luck with your project. Happy Tweening! Yep, Understood I may need to add additional sections to this and some other animated bits, but I'll ask for some help if/when I get there and if I can't figure it out on my own 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