Для привязки к скролу
gsap scrolltrigger (это современная версия ScrollMagic), для переключения кадров можно взять
animate-images.
Будет примерно так:
let animationState = { frame: 1 };
let animateImagesInstance = new AnimateImages(canvasElement, {
images: arrayWithImages,
preload: "all",
});
let timeline = gsap.timeline({
scrollTrigger: {
trigger: triggerBlock,
start: "top top",
end: 2000,
scrub: true,
}
});
timeline.to(animationState, {
frame: arrayWithImages.length,
onUpdate: function(){
animateImagesInstance.setFrame(Math.round(animationState.frame));
}
});