На своём хостинге (я пользуюсь reg.ru) создаём необходимую папку и загружаем в нее наши изображения. Копируем путь до папки. В моём случае: http://www.matilda-design.ru/video/

Загружаем их на хостинг

На своём хостинге в разделе ssl-сертификаты генерируем сертификат

Выпускаем сертификат на хостинге

Выпускаем на сайте SSL сертификат и устанавливаем безопасное соединение с сайтом через https

Выпускаем сертификат для домене

В Zero блоке создаём HTML блок и добавляем в него код

Шаг 1

Показать код

<!--Покадровый скролл-->
<!--https://mt-webdesign.ru/scroll-frames-->
<canvas id="video-canvas"></canvas>

Под этим блоком создаём еще Zero блок, чтобы можно было зафиксировать видео на скролл, через стандартную анимацию. (видео будет проигрываться, пока скроллим)

Шаг 2

Ниже добавляем код, через блок T123

Шаг 3

Показать код

<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);
}
// Условия для телефонов до 480px
if (screen.width < 480) {
images[0].onload = function() {
canvas.width = 1671;
canvas.height = 812;
render();
};
}
// Условия для маленьких планшетов от 480 до 640px
else if (screen.width < 640) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
// Условия для средних планшетов от 640 до 1000px
else if (screen.width < 1000) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
// Условия для больших планшетов от 1000 до 1200px
else if (screen.width < 1200) {
images[0].onload = function() {
canvas.width = 2811;
canvas.height = 1366;
render();
};
}
// Условия для старых ноутбуков от 1200 до 1440px
else if (screen.width < 1440) {
images[0].onload = function() {
canvas.width = 1853;
canvas.height = 900;
render();
};
}
// Условия для новых ноутбуков (hd) от 1440 до 1920px
else if (screen.width < 1920) {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
// Условия для настольных ПК (ultra-HD) + ретина от 1920 до 5500px
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: {
// markers: true,
trigger: ".trigger-animation-start",
start: "top top",
end: '+=2500px',
scrub: 0.5
},
onUpdate: render
});
</script>

В Zero блоке с видео создаём шейп и вешаем класс trigger-animation-start. Он будет служить триггером для начала анимации во время скролла. Заливку убираем

Шаг 4

Фиксируем на скролл блок с видео, через пошаговую анимацию на нужное кол. пикселей. У Zero блока выставляем overflow - visible

Шаг 5

Возвращаемся в скрипт выше и меняем путь до изображений на свой. Так же меняем кол. кадров на своё

Шаг 6

Меняем пропорции в зависимости от разрешения

Шаг 7

Более подробные настройки, возможности взаимодействия и подключение в видео

Другие модификации

Библиотека

Эффект следа из изображений

Tilda

Анимация градиента на тексте

Tilda