Canvas Scroll Clip is a standalone JavaScript micro-library for a fancy scroll based image sequence animation in canvas. There is no third party dependencies.
- Check the demo.
- View example implementation.
- React component Gist example
yarn add canvas-scroll-clip
npm install --save canvas-scroll-clip
Initialize Canvas Scroll Clip on an element with options:
import CanvasScrollClip from "canvas-scroll-clip";
new CanvasScrollClip(document.querySelector('.element'), {
framePath: "{url_of_first_frame_in_a_sequence}",
frameCount: 101,
scrollArea: 2000
})
When importing a module using require use .default const CanvasScrollClip = require('canvas-scroll-clip').default. Decided to stick with pure ES6 module semantics and keep the code generation as clean as possible.
Options object is required and takes these parameters:
Type: String
URL of first image of a sequence.
Important note: Sequence should start with leading 0, minimum 2 digits and at the end of the name. for example: https://<URL>/frame_0001.jpg.
Type: Number
Number of in total in a sequence.
Type: Number
Default: 2x the IMAGE height
Scrollable area height that is used to play the image sequence.
Type: String
Used for container and child element css classes.
Callback params: scrollTop
Type: Number
Event is triggered with scroll event. Returns scrollTop position.
CanvasScrollClip.events.on('viewport.scroll', function(scrollTop){
console.log(scrollTop);
});
Event is triggerent on window resize.
CanvasScrollClip.events.on('viewport.resize', function(){
console.log("window resized");
});
Event is triggered after all images preloaded. Good place to implement loader animation.
CanvasScrollClip.events.on('images.loaded', function() {
console.log("images.loaded");
});
Callback params (object):
total: frameCount
loaded: loadedImageCount
Event is triggered after every image preloaded. Good place to implement progress bar.
CanvasScrollClip.events.on('images.progress', function(progress) {
console.log(progress);
});
MIT license
Pending esbuild UMD format feature --format=umd support.