Pioter

Thank you Rodrigo!

Hi, I have followed your officials docs to change cursor's position on mouse move (final example at the bottom of this page: React & GSAP - Useful Patterns | GSAP | Docs & Learning). Everything seems to work fine, but I just want to confirm this is the 100% correct and recommended way of doing things in React (NextJS) with GSAP. Especially that I added to more event-based animations (showPlayButton on mouse enter and hidePlayButton on mouse leave). Would you mind having a look and confirming this is how GSAP pros would implement this? : ) Thank you! "use client"; import * as React from "react"; import { gsap } from "gsap" import { useGSAP } from "@gsap/react" export function HeroVideo(): JSX.Element { const videoContainer = React.useRef<HTMLDivElement>(null); const playButton = React.useRef<HTMLDivElement>(null); const xTo = React.useRef<((value: number) => void) | null>(null); const yTo = React.useRef<((value: number) => void) | null>(null); const { contextSafe } = useGSAP( () => { xTo.current = gsap.quickTo(playButton.current, "x", { duration: 0.8, ease: "power3", }); yTo.current = gsap.quickTo(playButton.current, "y", { duration: 0.8, ease: "power3", }); }, { scope: videoContainer } ); const showPlayButton = contextSafe(() => { gsap.to(playButton.current, { opacity: 1, scale: 1, duration: 0.3, }); }); const hidePlayButton = contextSafe(() => { gsap.to(playButton.current, { opacity: 0, scale: 0, duration: 0.3, }); }); const movePlayButton = contextSafe((e: React.MouseEvent) => { if (xTo.current && yTo.current) { xTo.current(e.clientX); yTo.current(e.clientY); } }); return ( <div ref={videoContainer} id="video-container" onMouseMove={(e) => movePlayButton(e)} onMouseEnter={showPlayButton} onMouseLeave={hidePlayButton} className="w-[100%] h-[100%] mt-[1vw] relative flex items-center justify-center cursor-none" > <div ref={playButton} id="play-button" className="opacity-0 scale-0 translate-x-[-50%] translate-y-[-50%] top-0 left-0 fixed uppercase text-[#fff] bg-[#000] text-[1.3vw] font-futuraBold rounded-[50%] py-[3vw] px-[2.3vw]" > Play </div> <video autoPlay loop muted src="/video/video.mp4" className="h-[100%] w-[100%] object-cover" /> </div> ); }