canvas-scroll-clip/src/main.stories.mdx

Canvas based image sequence scroll animation. Zero dependencies.

import { Meta } from '@storybook/addon-docs';

<Meta title="Intro" />

<style>{`

  .tip {
    display: inline-block;
    border-radius: 5px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    background: #E7FDD8;
    color: #66BF3C;
    padding: 5px 8px;
    margin-right: 10px;
    vertical-align: top;
  }

  .tip-wrapper {
    font-size: 13px;
    line-height: 26px;
    margin-top: 15px;
    margin-bottom: 40px;
  }

  .tip-wrapper code {
    font-size: 12px;
    display: inline-block;
  }

`}</style>

# 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. Checkout a **[demo](https://m5kr1pka.github.io/canvas-scroll-clip/?path=/story/canvas-scroll-clip--default)**.

## 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: "{first_frame_url_of_a_sequence}",
  frameCount: 101,
  scrollArea: 2000
})
```

### require('...').default
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.
<div className="tip-wrapper">
  <span className="tip">Important note</span>Sequence should start with leading 0, minimum 2 digits and at the end of the name. for example: 
  <code>https://..URL../frame_0001.jpg</code>
</div>

### 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

### viewport.scroll
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);
});
```

### viewport.resize
Event is triggerent on window resize.

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

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

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

### images.progress
Callback params (```object```): <br/>
```total: frameCount```<br/>
```loaded: loadedImageCount```<br/>

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

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

## Other

### License
MIT license