canvas-sprite-animation
This is my implementation of animation from a bunch of png/jpg files based on canvas.
Apple have used this technique on the MacBook Pro 16 promo page: https://www.apple.com/macbook-pro-16/
The advantage of this technique is that we will have more control over the frames loading. We can fetch frames much faster and efficient way by skiping intermediate frames.
Usage:
<!--Somewhere in dom-->
const canvasEl = document; const CanvasAnimation = isParralelFetch: true mainCanvas: canvasEl width: 400 height: 300 totalFrames: 240 `sprite/.png`;
You can also use it with some tweening library like gsap