How to create button hover animations in Nuxt 4 using GSAP like on https://www.museumofmoney.com/?

I’m working on a project using Nuxt 4 and I want to create button hover animations similar to the ones on Museum of Money.

My questions are:

1. How can I structure GSAP animations in Nuxt 4 for buttons to achieve this type of hover effect?

2. Are there best practices for combining GSAP with Vue’s reactivity for multiple buttons on a page?

3. How can I replicate a “fluid background hover” effect similar to the Museum of Money buttons?

Any guidance, examples, or references would be very helpful.

I tried this basic GSAP example:

<script setup lang="ts">
import { gsap } from 'gsap';
const btn = ref<HTMLElement | null>(null);
onMounted(() => {
if (!btn.value) return;
const myEase = "power2.out";
const hover = () => {
const tl = gsap.timeline();
tl.to(btn.value, {
backgroundColor: "#fff",
borderRadius: "8px",
duration: 0.2,
ease: myEase,
});
tl.to(btn.value, { y: -1, duration: 0.1, ease: "power2.out" });
tl.to(btn.value, { y: 1, duration: 0.1, ease: "power2.inOut" });
tl.to(btn.value, { y: 0, duration: 0.1, ease: "bounce.out" });
};
const unhover = () => {
const tl = gsap.timeline();
tl.to(btn.value, {
backgroundColor: "#28a745",
borderRadius: "30px",
duration: 0.2,
ease: myEase,
});
tl.to(btn.value, { y: -6, duration: 0.1, ease: "power2.out" });
tl.to(btn.value, { y: 3, duration: 0.08, ease: "power2.inOut" });
tl.to(btn.value, { y: 0, duration: 0.1, ease: "bounce.out" });
};
btn.value.addEventListener('mouseenter', hover);
btn.value.addEventListener('mouseleave', unhover);
});
</script>
<template>
<div class="btn-wrapper">
<button ref="btn" class="fancy-btn">Click Me</button>
</div>
</template>
<style scoped>
.btn-wrapper {
display: inline-block;
position: relative;
}
.fancy-btn {
height: 50px;
padding: 0 1rem;
border: 2px solid #333;
border-radius: 30px;
background: #28a745;
color: #fff;
font-size: 17px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
</style>