How to use gsap and canvas in React?

[Romanus]

Hello! I am learning Canvas. Made a simple example using gsap.ticker.

A cube is a separate entity with its own behavior pattern. How can I create many cubes from this template?

I don't understand how to separate the code. I have seen examples using classes. Is it ok to use classes in functional React components? How would you advise me to proceed?

 

I also don't understand, should I call gsap.ticker once, or should each cube call its own render?

See the Pen XWPmZmR?editors=0010 by romanusname (@romanusname) on CodePen

[Romanus]

I managed to create 2 cubes, but if each of them cleans the canvas, then only one is visible. If I clean the canvas in the App component, no one is visible. What am I doing wrong?

See the Pen yLxYjNr by romanusname (@romanusname) on CodePen

[Rodrigo]

Hi,

 

I'm not really an expert in canvas so I can't really give you a lot of pointers without diving into your example.

 

Me recommendation would be to make this work in Vanilla JS first and then port it into a React.

 

Finally I don't think this is the best approach:

<main>
  <Player startDirection={1} canvasRef={canvasRef}/>
  <Player startDirection={2} canvasRef={canvasRef}/>
  <canvas width={500} height={500} ref={canvasRef}></canvas>
</main>

Creating two components just for calling a drawing method as in this case, just create a method that accepts the start direction in the same component and you'll get access to the ref there.

 

14 hours ago, Romanus said:

I also don't understand, should I call gsap.ticker once, or should each cube call its own render?

Yep, no need to add the render method to the ticker more than once.

 

Hopefully this helps.

Happy Tweening!