Search the Community
Showing results for tags 'useeffect'.
Found 2 results
-
const DotCursor: React.FC = () => { const dotRef = useRef<HTMLDivElement>(null); const { clientX, clientY } = useMousePosition(); const [isVisible, setIsVisible] = useState(false); const handleMouseEnter = () => { setIsVisible(true); }; const handleMouseLeave = () => { setIsVisible(false); }; const handleMouseMove = () => { setIsVisible(true); }; useGSAP( () => { const dot = dotRef.current; if (!dot) return; window.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseenter", handleMouseEnter); document.addEventListener("mouseleave", handleMouseLeave); const animateDot = () => { gsap.set(dot, { x: clientX, y: clientY, }); }; gsap.ticker.add(animateDot); return () => { window.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseenter", handleMouseEnter); document.removeEventListener("mouseleave", handleMouseLeave); gsap.ticker.remove(animateDot); }; }, { dependencies: [clientX, clientY] } ); return ( <div ref={dotRef} className="dot-cursor bg-orange-700" style={{ opacity: isVisible ? 1 : 0, position: "fixed", width: "10px", height: "10px", border: "solid 1px black", borderRadius: "20%", pointerEvents: "none", transform: "translate(-50%, -50%)", zIndex: 9999, }} /> ); }; export default DotCursor; -
Hi there, New here (also new with gsap/react); I have made a side bar that slides out from the right side, I got the slide in animation to work but can't use .reverse() to reverse that animation. It immediately resets back to xPercent: 100 , instead of animating. Anyone here able to give me any pointers on how I should proceed? Small code snippet: const [menuOpen, setMenuOpen] = useState<boolean>(false); const [toggle, setToggle] = useState<boolean>(false); const handleToggle = () => { setToggle(!toggle); setMenuOpen(prev => !prev); }; const tl = gsap.timeline({ paused: true }); useEffect(() => { tl.fromTo('.hamburger__overlay', { xPercent: 100, duration: 1, }, { xPercent: 0, duration: 1, } ).reverse() tl.reversed(!toggle); }); (Dont mind the styling it's just a quick demo ) CodeSandbox link: https://codesandbox.io/s/sidebar-y45kf1
