Author: | m5kr1pka |
---|---|
Views Total: | 2,895 views |
Official Page: | Go to website |
Last Update: | October 26, 2022 |
License: | MIT |
Preview:

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, identifier: '', })
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 }); CanvasScrollClip.events.on('images.progress', function() { // after every image preloaded });
Changelog:
v1.3.1 (10/25/2022)
- Bugfixes
v1.3.0 (10/24/2022)
- update
v1.2.0 (07/31/2022)
- core: image load progress event
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