54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
if (typeof window !== "undefined") {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
}
|
|
|
|
interface ParallaxSectionProps {
|
|
children: React.ReactNode;
|
|
speed?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function ParallaxSection({
|
|
children,
|
|
speed = 0.5,
|
|
className = "",
|
|
}: ParallaxSectionProps) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current || typeof window === "undefined") return;
|
|
|
|
const element = ref.current;
|
|
gsap.to(element, {
|
|
y: -100 * speed,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: element,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: true,
|
|
},
|
|
});
|
|
|
|
return () => {
|
|
ScrollTrigger.getAll().forEach((trigger) => {
|
|
if (trigger.vars.trigger === element) {
|
|
trigger.kill();
|
|
}
|
|
});
|
|
};
|
|
}, [speed]);
|
|
|
|
return (
|
|
<div ref={ref} className={className}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|