74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { t as i18nT } from "i18next";
|
|
import { motion, useScroll, useSpring, useTransform } from "framer-motion";
|
|
|
|
export const MovingLine = () => {
|
|
const transition = {
|
|
duration: 14,
|
|
ease: "easeInOut",
|
|
};
|
|
|
|
const ref = useRef<any>(null);
|
|
|
|
// Track scroll progress, lies between 0 and 1.
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ["end end", "start start"],
|
|
});
|
|
|
|
// when scroll progress reached 1, path length becomes 0.
|
|
const pathLengthValue = useTransform(scrollYProgress, [0, 1], [1, 0]);
|
|
|
|
const PATH = "M0.5 0.980671L0.5 1566.02";
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-4xl flex-row items-start space-x-10" ref={ref}>
|
|
<svg width="1" height="1567" viewBox="0 0 1 1567" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
|
|
<path d={PATH} stroke="url(#paint0_linear_207_38)" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_207_38" x1="1" y1="-102.823" x2="1" y2="1566.02" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#3879E7" stop-opacity="0" />
|
|
<stop offset="1" stop-color="#3879E7" />
|
|
</linearGradient>
|
|
</defs>
|
|
<motion.path
|
|
// animatng pathLength value, goes from 1 to 0
|
|
style={{
|
|
pathLength: useSpring(pathLengthValue, {
|
|
stiffness: 500,
|
|
damping: 100,
|
|
}),
|
|
}}
|
|
transition={transition}
|
|
d={PATH}
|
|
stroke="var(--blue-500)"
|
|
strokeOpacity="1"
|
|
strokeLinecap={"round"}
|
|
strokeWidth="3"
|
|
/>
|
|
</svg>
|
|
<div className="flex w-full flex-col">
|
|
<Content />
|
|
<Content />
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
{
|
|
/* dummy content to fill up the screen */
|
|
}
|
|
|
|
export const Content = () => {
|
|
return (
|
|
<div className="content mb-10 w-full">
|
|
<p className="text-2xl font-bold text-white">{i18nT("components.aceternity.movingLine.title")}</p>
|
|
<p className="text-base font-normal text-neutral-300">{i18nT("components.aceternity.movingLine.description")}</p>
|
|
<div className="flex w-full space-x-4">
|
|
<div className="mt-4 h-40 w-full rounded-md bg-linear-to-tr from-slate-800 to-slate-700 md:h-96" />
|
|
<div className="mt-4 h-40 w-full rounded-md bg-linear-to-tr from-slate-800 to-slate-700 md:h-96" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|