Skip to content

Instantly share code, notes, and snippets.

@m5kr1pka
Created October 24, 2022 19:05
Show Gist options
  • Save m5kr1pka/f02c2afcaf5c73cc38546a801c48368a to your computer and use it in GitHub Desktop.
Save m5kr1pka/f02c2afcaf5c73cc38546a801c48368a to your computer and use it in GitHub Desktop.
canvas-scroll-clip React component example
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;
@m5kr1pka
Copy link
Author

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"
 />```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment