Frame-by-frame Animation On Scroll Using jQuery - frameByFrame.js

frameByFrame.js is a fancy jQuery plugin designed to provide a 360-degree image viewing experience for your products.

This plugin takes a set of images and swaps the image paths as a frame-by-frame animation when scrolling down or up the webpage.

Requires jQuery library and works with modern browsers that support HTML5 canvas element. Inspired by alexfoxy's lax.js scroll animation library.

How to use it:

1. Load the frameByFrame.js plugin's script after loading jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/frameByFrame.js"></script>

2. Create an HTML5 canvas element on which you want to render the frame-by-frame animation.

<canvas id="canvas"></canvas>

3. Initialize the plugin with the following parameters:

• animationStarts: Scroll position to trigger the animation
• animationEnds: Scroll position to end the animation
• firstFrame: First image
• lastFrame: Last image

$("#canvas").frameByFrame(
  /*
  [
    [animationStarts, animationEnds],
    [firstFrame, lastFrame]
  ]
  */
  [
    [0, 9000],
    [1, 35]
  ]
)};

4. Define the path to your product images and config the canvas with the following options:

$("#canvas").frameByFrame(
  [
    [0, 9000],
    [1, 243]
  ],
  {
    // canvas width
    canvasWidth: 800,

    // canvas height
    canvasHeight: 528,

    // path to image
    canvasImagesPath: "/images/prod1/",

    // image extension
    canvasImagesFormat: ".png",

    // number of frames (images)
    frameCount: 35,

    // where to start the animation
    anchor: "#customElement"
  }
)};

---

This awesome jQuery plugin is developed by AirMaks. For more Advanced Usages, please check the demo page or visit the official website.