Frame-by-Frame Animation On Scroll – scroll-animate

Preview:

Description:

scroll-animate is a JavaScript scroll animation library that takes a list of images and animates them frame by frame when scrolling down the webpage.

How to use it:

1. Download and insert the minified version of the scroll-animate library into the HTML file.

<script src="./dist/scrollAnimate.min.js"></script>

2. Create a container where you want to play the frame-by-frame animation.

<div id="animation-container"></div>

3. Initialize the library and specify the path to the images (frames).

var $aContainer = document.getElementById("animation-container");
scrollAnimate({
  frames: {
    path: "frames/",
    prefix: "frame_",
    extension: "jpg",
    amount: 40,
    pad: "00"
  },
  parent: $aContainer
});

4. Determine the start point and height of the container plus a offset for better presentation.

var $aContainer = document.getElementById("animation-container");
var start = aContainerRect.top;
var length = aContainerRect.height + 100;
scrollAnimate({
  frames: {
    path: "frames/",
    prefix: "frame_",
    extension: "jpg",
    amount: 40,
    pad: "00"
  },
  parent: $aContainer,
  scroll: {
    start: start,
    length: length
  }
});