Canvas Animation

[CedGrvl]

Hello,
I'm trying to animate hexagons on a cnavas. I have no problem to implement an svg animation because it's purely css animation but I have no idea how to do it with the canvas.
I manage to animate all the hexagons at the same time but I can't create a delay between each "ring" of the hexagon grid like on svg.
I don't know if gsap can help for that?

svg:
https://codesandbox.io/s/svg-hex-grid-2-lkbj5


canvas: 
https://codesandbox.io/s/canvas-hex-grid-thz70?file=/src/Grid.ts:2181-2651

I aim to animate this canvas as soon as there's a url change. 
the hexagons scale down to 0, change color and scale up to 1 for example
 

See the Pen Grid.ts:2181-2651 by s (@s) on CodePen

[ZachSaucier]

Hey CedGrvl. I'm not seeing GSAP being used anywhere in either project. Are you just asking for suggestions?

 

I'd likely create a data representation of the hexagons, animate those using GSAP, then have a method to render them to canvas.