diff --git a/src/components/Sections/TechStacks.jsx b/src/components/Sections/TechStacks.jsx index 45ada96..d0d5882 100644 --- a/src/components/Sections/TechStacks.jsx +++ b/src/components/Sections/TechStacks.jsx @@ -1,73 +1,5 @@ -import { useRef } from "react"; -import { - motion, - useScroll, - useSpring, - useTransform, - useMotionValue, - useVelocity, - useAnimationFrame -} from "framer-motion"; -import { wrap } from "@motionone/utils"; import Marquee from "react-fast-marquee"; -function ParallaxText({ children, baseVelocity = 100 }) { - const baseX = useMotionValue(0); - const { scrollY } = useScroll(); - const scrollVelocity = useVelocity(scrollY); - const smoothVelocity = useSpring(scrollVelocity, { - damping: 50, - stiffness: 400 - }); - const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], { - clamp: false - }); - - /** - * This is a magic wrapping for the length of the text - you - * have to replace for wrapping that works for you or dynamically - * calculate - */ - const x = useTransform(baseX, (v) => `${wrap(-20, -45, v)}%`); - - const directionFactor = useRef(1); - useAnimationFrame((t, delta) => { - let moveBy = directionFactor.current * baseVelocity * (delta / 1000); - - /** - * This is what changes the direction of the scroll once we - * switch scrolling directions. - */ - 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); - }); - - /** - * The number of times to repeat the child text should be dynamically calculated - * based on the size of the text and viewport. Likewise, the x motion value is - * currently wrapped between -20 and -45% - this 25% is derived from the fact - * we have four children (100% / 4). This would also want deriving from the - * dynamically generated number of children. - */ - return ( -
- - {children} - {children} - {children} - {children} - -
- ); -} - const logoUrls = [ '/react-native.svg', '/graphql.svg', @@ -86,17 +18,12 @@ export default function TechStacks() { <>
- {logoUrls.map((logoUrl) => )} + {logoUrls.map((logoUrl) => )} - {logoUrls.map((logoUrl) => )} + {logoUrls.map((logoUrl) => )}
); -} - -/*
- React Express GraphQL AWS AliCloud MongoDB Nodejs Selenium Cypress Docker Strapi - Next.js Three.js Astro Framer Motion Tailwind Linux SQL NoSQL Git React Native Ionic -
*/ \ No newline at end of file +} \ No newline at end of file