useGSAP and React, multiple events

[Pioter]

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>
  );
}

 

[Rodrigo]

Hi @Pioter and welcome to the GSAP Forums!

 

Your code looks good, maybe the only change I'd make is to use just one Tween for showing/hiding the button and play/reverse it:

const showButtonTween = useRef();

const { contextSafe } = useGSAP(() => {
  showButtonTween.current = gsap.to(playButton.current, {
    opacity: 1,
    scale: 1,
    duration: 0.3,
  }).reverse();
});

const togglePlayButton = () => {
  const { current } = showButtonTween;
  current.reversed(!current.reversed());
};

Then in the JSX:

<div
  ref={videoContainer}
  id="video-container"
  onMouseMove={(e) => movePlayButton(e)}
  onMouseEnter={togglePlayButton}
  onMouseLeave={togglePlayButton}
  className="w-[100%] h-[100%] mt-[1vw] relative flex items-center justify-center cursor-none"
>
</div>

Also be sure to check if you don't get TypeScript errors with this:

const movePlayButton = contextSafe((e: React.MouseEvent) => {}));

We've seen that this works:

const movePlayButton = contextSafe(() => {}) as React.MouseEventHandler;

You can find more info in this thread:

 

Hopefully this helps.

Happy Tweening!

[Pioter]

Thank you Rodrigo!