<script src='https://matilda-design.ru/library/GSAP.js'></script>
<script src='https://matilda-design.ru/library/ScrollTrigger.js'></script>
<script>
const canvas = document.getElementById("video-canvas");
const context = canvas.getContext("2d");
const frameCount = 58;
const currentFrame = index => (
`http://www.matilda-design.ru/video//${(index + 1)}.jpg`
);
const images = []
const cano = {
frame: 0
};
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, canvas.width, canvas.height);
}
if (screen.width < 480) {
images[0].onload = function() {
canvas.width = 1671;
canvas.height = 812;
render();
};
}
else if (screen.width < 640) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
else if (screen.width < 1000) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
else if (screen.width < 1200) {
images[0].onload = function() {
canvas.width = 2811;
canvas.height = 1366;
render();
};
}
else if (screen.width < 1440) {
images[0].onload = function() {
canvas.width = 1853;
canvas.height = 900;
render();
};
}
else if (screen.width < 1920) {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
else if (screen.width < 5500) {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
else {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
gsap.to(cano, {
frame: frameCount - 1,
snap: "frame",
scrollTrigger: {
trigger: ".trigger-animation-start",
start: "top top",
end: '+=2500px',
scrub: 0.5
},
onUpdate: render
});
</script>