Trying to implement a scroll animation on my website, I came across a guide for creating an "Apple-like animation" using image sequences. Even though I'm new to Angular, I attempted to adapt the code to work with Angular.
However, instead of animating smoothly, the images are just stacking on top of each other as I scroll through the page.
Here is the current outcome:
https://i.stack.imgur.com/TXoPn.jpg
This is the snippet of code I have been working with:
ngOnInit(): void {
const canvas = <HTMLCanvasElement> document.getElementById("canvas1")!;
const context = canvas.getContext("2d")!;
canvas.width = 1158;
canvas.height = 770;
const img = new Image()
img.onload = () => {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = this.currentFrame(1);
window.addEventListener('scroll', () => {
const scrollLength = window.scrollY;
const maxScrollTop = this.document.body.scrollHeight - window.innerHeight;
const scrollFraction = scrollLength / maxScrollTop;
let frameIndex = Math.min(
this.frameCount,
Math.floor(scrollFraction * this.frameCount)
);
if (frameIndex + 1 > this.frameCount) frameIndex = this.frameCount + 2;
requestAnimationFrame(() => this.updateImage(frameIndex, canvas, context, img));
});
this.preloadImages();
}
updateImage(index: number, canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, img: HTMLImageElement) {
if (index == 0 || index > this.frameCount) {
context.clearRect(0, 0, img.width , img.height);
} else {
img.src = this.currentFrame(index);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}