Import source: cshare-app/src/hooks/useLenis
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,37 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
import Lenis from 'lenis';
|
||||||
|
|
||||||
|
let lenis = null;
|
||||||
|
|
||||||
|
export function useLenis() {
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
lenis = new Lenis({
|
||||||
|
duration: 1.2,
|
||||||
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||||
|
smoothWheel: true,
|
||||||
|
wheelMultiplier: 1,
|
||||||
|
touchMultiplier: 1.5,
|
||||||
|
});
|
||||||
|
|
||||||
|
function raf(time) {
|
||||||
|
lenis.raf(time);
|
||||||
|
requestAnimationFrame(raf);
|
||||||
|
}
|
||||||
|
|
||||||
|
const rafId = requestAnimationFrame(raf);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
lenis.destroy();
|
||||||
|
lenis = null;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Scroll to top on route change
|
||||||
|
useEffect(() => {
|
||||||
|
if (lenis) lenis.scrollTo(0, { immediate: true });
|
||||||
|
}, [pathname]);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user