Having a hard time converting 2 examples to React

[newguy123]

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

[newguy123]

Errors I get in the console when I try to convert to to React:

scrolltrigger cannot read properties of undefined (reading 'left')

[newguy123]

I'm seeing how to create a stackblitz account to get a pen going on it for easier explanation...

[newguy123]

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.

[mvaneijgen]

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?

[newguy123]

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/

[newguy123]

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

[newguy123]

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.....

[newguy123]

ok this seems to be my correct stackblitz link now (apologies for the mixup)

 

https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js

[mvaneijgen]

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. 

[newguy123]

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

[newguy123]

Ive added the imageSequence inside the gsap.context inside useLayoutEffect, but it still doesnt know what canvas is...

[Rodrigo]

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!

[GreenSock]

Maybe this will help nudge you in the right direction: 

https://stackblitz.com/edit/react-6u8izj?file=src%2FApp.js

[newguy123]

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