<canvas id="video-canvas"></canvas>

<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>

  <script>
     (function() {
        const canvas = document.getElementById("video-canvas");
        const context = canvas.getContext("2d");
        const frameCount = 30;
        const currentFrame = index => `http://www.matilda-design.ru/grink/bubble-low/${index + 1}.png`;

        const images = [];
        const cano = {
          frame: 0
        };

        for (let i = 0; i < frameCount; i++) {
          const img = new Image();
          img.onload = function() {
            render();
          };
          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 = 145;
            canvas.height = 450;
            render();
          };
        } else if (screen.width < 640) {
          images[0].onload = function() {
            canvas.width = 185;
            canvas.height = 530;
            render();
          };
        } else if (screen.width < 1000) {
          images[0].onload = function() {
            canvas.width = 312;
            canvas.height = 926;
            render();
          };
        } else if (screen.width < 1200) {
          images[0].onload = function() {
            canvas.width = 312;
            canvas.height = 936;
            render();
          };
        } else if (screen.width < 1440) {
          images[0].onload = function() {
            canvas.width = 312;
            canvas.height = 936;
            render();
          };
        } else if (screen.width < 1920) {
          images[0].onload = function() {
            canvas.width = 312;
            canvas.height = 936;
            render();
          };
        } else if (screen.width < 5500) {
          images[0].onload = function() {
            canvas.width = 312;
            canvas.height = 936;
            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>