I have an animation that draws a progressively increasing circle on the canvas until it occupies the entire canvas:
const maxRadius = Math.ceil(
Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 5;
function animate() {
if (radius >= maxRadius) {
canvas.remove();
return;
}
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI * 2);
context.closePath();
context.fill();
radius += 5;
requestAnimationFrame(animate);
}
animate();
And I tried to rewrite it using GSAP but it doesn't work:
const maxRadius = Math.ceil(
Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 5;
gsap.to({ radius: maxRadius }, {
duration: 1,
radius: maxRadius,
onUpdate: () => {
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI * 2);
context.closePath();
context.fill();
},
onComplete: () => {
canvas.remove();
},
ease: "power1.inOut"
});
Please help me