const drawImage = useCallback(() => {
const image = images[defaultFrame.frame];
const canvas = document.querySelector("canvas") as HTMLCanvasElement;
// window.innerWidth
canvas.style.width = `${width}`;
// window.innerHeight
canvas.style.height = `${height}`;
const context = canvas.getContext("2d") as CanvasRenderingContext2D;
// window.innerWidth
context.canvas.width = width;
// window.innerHeight
context.canvas.height = height;
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the image on the canvas
//, width, height
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, [defaultFrame.frame, height, images, width]);
const initGSAP = useCallback(() => {
gsap.to(defaultFrame, {
frame: frameCount - 1,
snap: "frame",
ease: "none",
scrollTrigger: {
scrub: true,
pin: "canvas",
},
onUpdate: drawImage,
});
gsap.fromTo(
".game",
{
opacity: 0.1,
},
{
opacity: 1,
scrollTrigger: {
scrub: true,
start: "0%",
end: "100%",
},
onComplete: () => {
// do stuff
},
}
);
images[defaultFrame.frame].onload = drawImage;
}, [defaultFrame, drawImage, images]);
I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this?
Here a video