Canvas Scroll Clip

 

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

Install

``
yarn add canvas-scroll-clip
`
`
npm install --save canvas-scroll-clip
`

Usage

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
})
`

$3


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

Options object is required and takes these parameters:

#### framePath (required)
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:///frame_0001.jpg`.

#### frameCount (required)
Type: `Number`
Number of in total in a sequence.

#### scrollArea (recommended)
Type: `Number`

Default: `2x the IMAGE height`

Scrollable area height that is used to play the image sequence.

#### identifier
Type: `String`
Used for container and child element css classes.

Events

$3


Callback params: `scrollTop`

Type: `Number`

Event is triggered with scroll event. Returns `scrollTop` position.

#### Usage

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

$3

Event is triggerent on window resize.

#### Usage
`
CanvasScrollClip.events.on('viewport.resize', function(){
console.log("window resized");
});
`

$3

Event is triggered after all images preloaded. Good place to implement loader animation.

#### Usage
`
CanvasScrollClip.events.on('images.loaded', function() {
console.log("images.loaded");
});
`

$3


Callback params (`object`):

`total: frameCount`

`loaded: loadedImageCount`

Event is triggered after every image preloaded. Good place to implement progress bar.

#### Usage
`
CanvasScrollClip.events.on('images.progress', function(progress) {
console.log(progress);
});
``

$3

MIT license

$3

Pending esbuild UMD format feature --format=umd support.