https://github.com/ramondeleonca/next-locomotive-scroll
https://github.com/ramondeleonca/next-locomotive-scroll
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ramondeleonca/next-locomotive-scroll
- Owner: ramondeleonca
- Created: 2023-04-05T01:00:00.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-03T17:21:20.000Z (almost 2 years ago)
- Last Synced: 2024-04-27T05:21:52.272Z (about 1 year ago)
- Language: TypeScript
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Locomotive Scroll
An implementation / wrapper of [locomotive-scroll](https://locomotive-scroll.github.io) for Next.JS with built in integration with [GSAP](https://gsap.com)
## Usage
Usage is pretty straight forward:
```tsx
{/* Simply add the component to the root of your page */}
{/* And add your page's children */}
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
```
To use GSAP tweens with ScrollTrigger a little extra code is needed:
```tsx
{/* Add these two lines to track page loaded state */}
const [loaded, __setLoaded] = useState(false);
useEffect(() => document.readyState === "complete" ? __setLoaded(true) : window.addEventListener("load", () => __setLoaded(true)), []);
```
```tsx
useEffect(() => {
{/* Place all gsap-related content in a gsap context like normal */}
const ctx = gsap.context(() => {
{/* Everything else is normal */}
gsap.to(polaroidsRef.current, {
x: `-${100 * polaroidsScale}%`,
scale: polaroidsScale,
scrollTrigger: {
scrub: true,
trigger: polaroidsRef.current,
end: "bottom"
}
});
});
return () => ctx.revert();
}, [
{/* Except down here... Make sure to add the loaded state to the dependency array */}
loaded
]);
```