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.
54 lines • 2.66 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TextScrollMarquee;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const wrap = (min, max, v) => {
const rangeSize = max - min;
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};
const utils_1 = require("@/components/lib/utils");
function TextScrollMarquee({ children, baseVelocity = 1, className, scrollDependent = false, delay = 0, direction = 'left', }) {
const baseX = (0, framer_motion_1.useMotionValue)(0);
const { scrollY } = (0, framer_motion_1.useScroll)();
const scrollVelocity = (0, framer_motion_1.useVelocity)(scrollY);
const smoothVelocity = (0, framer_motion_1.useSpring)(scrollVelocity, {
damping: 50,
stiffness: 400,
});
const velocityFactor = (0, framer_motion_1.useTransform)(smoothVelocity, [0, 1000], [0, 2], {
clamp: false,
});
// ✅ Use modular wrap from -100% to 0% for seamless loop
const x = (0, framer_motion_1.useTransform)(baseX, (v) => `${wrap(-100, 0, v % 100)}%`);
const directionFactor = (0, react_1.useRef)(direction === 'left' ? 1 : -1);
const hasStarted = (0, react_1.useRef)(false);
(0, react_1.useEffect)(() => {
const timer = setTimeout(() => {
hasStarted.current = true;
}, delay);
return () => clearTimeout(timer);
}, [delay]);
(0, react_1.useEffect)(() => {
directionFactor.current = direction === 'left' ? 1 : -1;
}, [direction]);
(0, framer_motion_1.useAnimationFrame)((t, delta) => {
if (!hasStarted.current)
return;
let moveBy = directionFactor.current * baseVelocity * (delta / 1000);
if (scrollDependent) {
if (velocityFactor.get() < 0) {
directionFactor.current = -1;
}
else if (velocityFactor.get() > 0) {
directionFactor.current = 1;
}
}
moveBy += directionFactor.current * moveBy * velocityFactor.get();
baseX.set(baseX.get() + moveBy);
});
return ((0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden whitespace-nowrap flex flex-nowrap", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex whitespace-nowrap gap-10 flex-nowrap", style: { x }, children: [...Array(4)].map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('block text-[5vw]', className), children: children }, index))) }) }));
}
//# sourceMappingURL=text-scroll-marquee.js.map