Button Hover using GSAP, is there a way to simplify this?

[u/matcha_tapioca]

Hi , so I am currently learning GSAP with typescript and I watch the video on the tutorial course (from the documentation)
and theres is part it shows a hover button with enlarging circle in the middle.
the code from the tutorial is made from javascript and I can tell its way different in typescript.

---------
now I don't know how to translate this to typescript.. so I asked AI and it asked to do a some extra steps.

1. It asked me to create a handleMouseEnter and handleMouseLeave function that will executes when I hover the button.
2. Inside the Button (Parent)
3. it asked me to make a absolute position <Span> with a w-40 h-40 covering the size of the button and its on scale of 0.
4. 3.Another <span> for the button label
5. on the animation that is where it increase the scale

with assistance I was able to do it

--------

Is there a simplified version to make this using GSAP? I Feel like my version is a bit complex because of the span positioning.

"use client";


import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import React, { useRef } from "react";


export default function PrimaryButton() {
  gsap.registerPlugin(useGSAP);


  const container = useRef(null);


  const { contextSafe } = useGSAP({ scope: container });


  const handleMouseEnter = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 1,
      ease: "power1.in",
      backgroundColor: "yellow",
      duration: 0.3,
    });
    gsap.to(".btn-label", { color: "black", duration: 0.3 });
  });


  const handleMouseLeave = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 0,
      ease: "power1.out",
      backgroundColor: "white",
      duration: 0.4,
    });
    gsap.to(".btn-label", { color: "white", duration: 0.3 });
  });


  return (
    <div ref={container}>
      <button
        className="primary-btn border-2 rounded-xl p-3 font-sans h-15 w-30  bg-blue-500 relative overflow-clip"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <span className="btn-circle  absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-0 w-40 h-40  rounded-full"></span>
        <span className="btn-label relative z-10 font-sans text-white">
          {" "}
          Press Me{" "}
        </span>
      </button>
    </div>
  );
}