canvasとjsを使ったスクロールで画像切り替えの案件

canvasアニメーション初心者です、どなたかわかる方がいましたらご教示お願いいたします。

以下のサイトのようなcanvasに画像を描写し、スクロール値で画像を切り替え、アニメーションするような方法がわからず困っています。
https://serve.postmates.com/
https://www.apple.com/jp/airpods-pro/
canvasでアニメーションして、なるべく軽くスムーズにアニメーションさせたいと思っています。

実現したいこと

——やりたい事(困っている事)——
・「テストサイトでやってみた事❶」と「テストサイトでやってみた事❷」をどのように合わせてcanvasアニメーションしたらよいかがわからないでいます
・「テストサイトでやってみた事❶」のデモサイトを早くスクロールすると、画像が何枚か飛んでします(特に最初らへんの画像)

試したこと

———テストサイトでやってみた事❶——
なんとか自力で調べて、以下のようなコードでimgタグの切り替えでアニメーションを作っています
var SIZE = 63;
var tmp = {};
loadImageToTmp();
function loadImageToTmp(){
for(var i=1;i<=SIZE;i++){
const _i = i;
const img = new Image();
tmp[_i] = null;
img.src = "img/0" + _i + ".png";
img.addEventListener("load",()=>{
tmp[_i] = img;
})
}
}

const image = document.getElementById("anim_img");

const PX = 50; // 50px分の移動ごと画像を1枚進める
const offset = $("#anim_img_box").offset(); // 画像を入れるdiv要素の高さ
$(window).scroll(function() {
const y = $(window).scrollTop();//スクロール位置
const dy = y - offset.top;//スクロール位置 - #anim_img_boxの高さ
if(offset.top<y&&y<offset.top+SIZE*PX) {
$("#anim_img_box").css("top",0)
const i = Math.floor(dy / PX);//四捨五入切り捨て
if(i <= 0 | i >= SIZE) return;
if(tmp[i].src) image.src = tmp[i].src;
}else if(y >= offset.top + SIZE * PX) {
$("#anim_img_box").css("top","-" + (dy - SIZE * PX))
}
});

$("#anim_img_padding").height(SIZE * PX);

・デモサイト(画像はアップルのものを拝借しています)
https://nakashima.lsv.jp/test-apple/
ベーシック認証
nakashima
shimakana

——テストサイトでやってみた事❷——　
Canvasタグにとりあえず一枚の画像を描写はできました、コードは以下です
const canvas = document.getElementById("canvas");
let imagePath = "img/024.png";
draw(canvas,imagePath);
function draw(canvas,imagePath){
// console.log(draw);
const image = new Image();
// console.log(image);
image.addEventListener("load",function (){
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
});
image.src = imagePath;
console.log(image.src);
}

デモサイト
https://nakashima.lsv.jp/test-canvas/
ベーシック認証
nakashima
shimakana

——やってみた事❸——　
❷のlet imagePath = "img/024.png"; の箇所の024.pngがスクロールするごとに切り替わっていけばよいのでは、、、と素人ながらに思って
❶で作成したvar tmp = {};に格納される値を入れてみる、、、というのを自力でやってみみようと試してみましたが、具体的なコードが記述できず困っています。。。

補足情報（FW/ツールのバージョンなど）

制作環境はmacでバージョン12.6
使用ツールvscode
使用ブラウザChrome最新バージョン

ここにより詳細な情報を記載してください。