Image Sequence Animation On Scroll – Canvas Scroll Clip

Category: Animation , Javascript | September 11, 2021
Author:m5kr1pka
Views Total:64 views
Official Page:Go to website
Last Update:September 11, 2021
License:MIT

Preview:

Image Sequence Animation On Scroll – Canvas Scroll Clip

Description:

A scroll-triggered image sequence animation (also called frame animation) inspired by Apple Airpods website.

Implemented in JavaScript and Canvas.

How to use it:

1. Install and import the Canvas Scroll Clip.

# Yarn
$ yarn add canvas-scroll-clip

# NPM
$ npm i canvas-scroll-clip --save

import CanvasScrollClip from “canvas-scroll-clip”;

2. Initialize the CanvasScrollClip on the target container element, specify the path to the first image, determine the total number of animation frames, and set the height of the scroll area as follows:

new CanvasScrollClip(document.querySelector('.example'), {
    framePath: "https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg",
    frameCount: 140,
    scrollArea: 2000
})

3. Event handlers.

CanvasScrollClip.events.on('viewport.scroll', function(scrollTop){
  console.log(scrollTop);
});

CanvasScrollClip.events.on('viewport.resize', function(){
  // on resize
});

CanvasScrollClip.events.on('images.loaded', function() {
  // on image loaded
});

Changelog:

v1.1.0 (09/11/2021)

  • Update

v1.0.4 (09/08/2021)

  • Bug Fixes

v1.0.3 (09/07/2021)

  • Bug Fixes
  • Performance Improvements

You Might Be Interested In:


Leave a Reply