"use client"; import React, { useRef } from "react"; import { useScroll, useTransform, motion, MotionValue } from "motion/react"; export const ContainerScroll = ({ titleComponent, children, }: { titleComponent: string | React.ReactNode; children: React.ReactNode; }) => { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, }); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth <= 768); }; checkMobile(); window.addEventListener("resize", checkMobile); return () => { window.removeEventListener("resize", checkMobile); }; }, []); const scaleDimensions = () => { return isMobile ? [0.7, 0.9] : [1.05, 1]; }; const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]); const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions()); const translate = useTransform(scrollYProgress, [0, 1], [0, -100]); return (

{children}

); }; export const Header = ({ translate, titleComponent }: any) => { return ( {titleComponent} ); }; export const Card = ({ rotate, scale, children, }: { rotate: MotionValue; scale: MotionValue; translate: MotionValue; children: React.ReactNode; }) => { return (

{children}

); };

Container Scroll Animation

Instalação

Dependências