lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
85 lines • 3.84 kB
JavaScript
;
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollPara = ScrollPara;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@gsap/react");
const gsap_1 = __importDefault(require("gsap"));
const ScrollTrigger_1 = require("gsap/ScrollTrigger");
const react_2 = require("react");
const utils_1 = require("@/components/lib/utils");
function ScrollPara({ paragraphs, direction = "bottom", startBlur = 10, offset = 50, className, containerClassName, textClassName, startOpacity = 0.1, stagger = 0.5, }) {
const container = (0, react_2.useRef)(null);
const textRefs = (0, react_2.useRef)([]);
(0, react_1.useGSAP)(() => {
gsap_1.default.registerPlugin(ScrollTrigger_1.ScrollTrigger);
const elements = textRefs.current.filter(Boolean);
const totalElements = elements.length;
if (totalElements === 0)
return;
const getInitialTransform = () => {
switch (direction) {
case "top":
return { y: -offset, x: 0 };
case "left":
return { x: -offset, y: 0 };
case "right":
return { x: offset, y: 0 };
case "bottom":
return { y: offset, x: 0 };
case "none":
default:
return { x: 0, y: 0 };
}
};
// Set initial state
elements.forEach((el) => {
gsap_1.default.set(el, {
...getInitialTransform(),
opacity: startOpacity,
filter: `blur(${startBlur}px)`,
});
});
const scrollTimeline = gsap_1.default.timeline({
scrollTrigger: {
trigger: container.current,
start: "top top",
end: `+=${window.innerHeight * totalElements * 0.8}`, // Extended scroll duration based on items
pin: true,
scrub: 1,
pinSpacing: true,
anticipatePin: 1,
},
});
elements.forEach((el, index) => {
scrollTimeline.to(el, {
x: 0,
y: 0,
opacity: 1,
filter: "blur(0px)",
duration: 1,
ease: "power2.out",
}, index * stagger);
});
const resizeObserver = new ResizeObserver(() => {
ScrollTrigger_1.ScrollTrigger.refresh();
});
if (container.current) {
resizeObserver.observe(container.current);
}
return () => {
resizeObserver.disconnect();
scrollTimeline.kill();
};
}, {
scope: container,
dependencies: [direction, paragraphs.length, startOpacity, startBlur, offset, stagger],
});
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("relative w-full min-h-[100vh]", className), ref: container, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex h-[100vh] w-full items-center justify-center overflow-hidden p-6 md:p-12", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("relative w-full max-w-5xl flex flex-col gap-6 md:gap-10", containerClassName), children: paragraphs.map((text, i) => ((0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)("text-2xl md:text-5xl lg:text-6xl font-medium leading-tight tracking-tight text-white will-change-transform", textClassName), ref: (el) => {
textRefs.current[i] = el;
}, children: text }, i))) }) }) }));
}
//# sourceMappingURL=scroll-para.js.map