update miletruth page and remove unwanted files
This commit is contained in:
61
src/animations/SmoothScroll.tsx
Normal file
61
src/animations/SmoothScroll.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import Lenis from "lenis";
|
||||
|
||||
/**
|
||||
* SmoothScroll
|
||||
* ---------------------------------------------------------------------------
|
||||
* One global Lenis instance, driven by a SINGLE rAF source (GSAP's ticker) and
|
||||
* kept locked to ScrollTrigger. Deliberately gated OFF on:
|
||||
* - /miletruth — it stacks 3 pinned WebGL sections; JS scroll-smoothing there
|
||||
* fights the pins and causes the very lag we're trying to remove. Native
|
||||
* scroll is used on that route.
|
||||
* - touch devices — native momentum is smoother than emulated inertia.
|
||||
* - prefers-reduced-motion.
|
||||
*
|
||||
* Re-evaluates on every route change: the effect cleanup destroys the previous
|
||||
* instance, so entering /miletruth tears Lenis down and leaving it re-inits.
|
||||
*/
|
||||
const DISABLED_ROUTES = ["/miletruth"];
|
||||
|
||||
export default function SmoothScroll() {
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const routeDisabled = DISABLED_ROUTES.some(
|
||||
(r) => pathname === r || pathname.startsWith(`${r}/`),
|
||||
);
|
||||
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
// Mouse/desktop only — touch devices already have good native momentum.
|
||||
const isPointerFine = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
|
||||
|
||||
if (routeDisabled || prefersReduced || !isPointerFine) return;
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const lenis = new Lenis({
|
||||
duration: 1.05,
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
orientation: "vertical",
|
||||
gestureOrientation: "vertical",
|
||||
smoothWheel: true,
|
||||
});
|
||||
|
||||
lenis.on("scroll", ScrollTrigger.update);
|
||||
const tickerCb = (time: number) => lenis.raf(time * 1000); // ticker is seconds, Lenis wants ms
|
||||
gsap.ticker.add(tickerCb);
|
||||
gsap.ticker.lagSmoothing(0);
|
||||
ScrollTrigger.refresh();
|
||||
|
||||
return () => {
|
||||
gsap.ticker.remove(tickerCb);
|
||||
lenis.destroy();
|
||||
};
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user