canvas-scroll-clip React component example

canvas-scroll-clip.js

import * as React from "react";
import CanvasScrollClip from "canvas-scroll-clip";

const CanvasScroll = ({ firstFrame, frameCount, frameScrollArea }) => {

  const ref = React.createRef();

  React.useEffect(() => {
    new CanvasScrollClip(ref.current, {
      framePath: firstFrame,
      frameCount: frameCount,
      scrollArea: frameScrollArea
    });

  }, []);


  return (
    <div ref={ref}></div>
  )
}

export default CanvasScroll;

Usage:

<Canvas
  firstFrame="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg"
  frameCount="101"
  frameScrollArea="2000"
 />```