Kirdes

Just found out. Thx

Hi. Any idea why my animation breaks when the two panels are animated ?

Got it. Thanks for your time. Have a nice day

Okay but can we say that in my case I need to recalculate the square position before update ? if yes, the first solution you gave me is maybe more "performant" ? https://codepen.io/kirdesmf/pen/GROqdZx?editors=1010 https://codepen.io/kirdesmf/pen/ZEapVMG?editors=0010

If I correctly understand with the second solution, I would have to recreate all object during resizing ? Actually the first solution is working great, I learn a lot from you @OSUblake

To be honest, I'm not sure I understand resizing. I know that I can use css and that the canvas will behave like an image ( object-fit: cover for example ) The problem I have is that at some screen size the canvas will be cut. When I resize the canvas with js, the canvas changes size but the drawing does not scale. Concerning the ratio, I don't really see how to do it after several researches. I understand that positions and sizes can be proportional to the screen size but it's still unclear to me. Maybe it would be better to use a librairy that takes care of this kind of thing for me ? or maybe I overthink it. My goal is to have this grid of squares visible at any time, other objects are animated in relation to other objects and to the screen

Just needed to play with delays https://codepen.io/kirdesmf/pen/GROqNRa?editors=0010

Other question, How can I can start the y animation once the column in x final position, not all column ?

Oh Function based values, nice ! Again thanks @OSUblake and also thx for the resizing tips.

Hello ! When this animation starts, I want each column to go from `x: 0` to his original x position and only after that,animate each square to his y position. Actually, you can see in the codepen, it animates directly the x and y position. I tried with Keyframes, but problem is, I need to know the initial value, I can miss something. Hope, you can understand what I'm trying to achieve. And I have a bonus question : Is anyone can tell me how to handle resizing correctly ? Is it possible to just resize element without restart the animation ? I'm actually building a website with react and I'm facing some issues with resizing: - animation restart when resizing - on tablet/mobile ( tested in chrome and FF ) is like there is no resizing. I can also provide an example with React but this is not the forum's topic and I guess its maybe an other topic Thx Ced

Hey @OSUblake, first I really appreciate that you take the time to check my codepen. ? Thanks you Blake. I had a look a few years ago but without much result, must have been lacking in js. I'm back in the canvas game since 1 week. Now that js and I are friends, I understand better how the canvas api works, which is cool I will be less limited in animation. I found most of the info on this forum. There are not many good resources about 2D canvas out there. I think I have understood how to cache an object much clearer now

Sorry to disturb again. I tried to use an offscreen canvas but I'm sure if its correct. I made a new codepen, I think its "ok" because when I use filter like drop shadow I dont have any performance issue or less. still not sure. And I'm facing an other issue, I cant find a way to animate the alpha with the offscreen canvas. Same thing with hsla instead of globalAlpha. You can toggle useCacheline 167. Thx https://codepen.io/kirdesmf/pen/bGoQZYE?editors=0010

So if I understand correctly, in my case, I cant use the offscreen canvas because I have different shapes ? and tbh I wont go with more than 150 objects so maybe there is no need for an offscreen canvas..I will investigate in PixiJs but it was more to understand the native api. Thx for your answers

Hello, First of all, I'm sorry if this is not totally in line with GSAP but the fact that I found most of the information on this forum make me think that this is the right place to ask. So after browsing the forum, I am now more comfortable with canvas and hope to do things right. However I'm not sure about some points : - Is this the right way to use gsap.ticker on a mouse event? I plan to have a page with several canvas I would put the stackblitz link. There doesn't seem to be any problem for the moment but I have some doubts - If i increase the number of objects to 1000, we can see some performance problems. can i improve this ? I tried to use an offscreen canvas but I can't really understand how to animate it and how to set it up, despite having seen some examples on the forum Stackblitz: https://stackblitz.com/edit/vitejs-vite-qlxmpw?file=src%2Fstyle.css&terminal=dev Codepen: https://codepen.io/kirdesmf/pen/qBPJLbB Thx for your time and sorry if this post does not fit the forum ?