<div class="menu__wrapper">
<a href="#" class="menu__button">Donate</a>
  
</div>          
  <script src="https://cdn.jsdelivr.net/npm/split-type@0.3.3/umd/index.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="js/main.min.js"></script>

body{
background: #c4c4c4
}
.menu__wrapper{
  margin-top: 50px;
      display: flex;
    align-items: center;
    justify-content: center;
}
.menu__button{
      max-width: 200px;
    width: 100%;
    text-align: center;
    padding: 18px 60px;
    background-color: purple;
    color: white;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; 
    letter-spacing: 4.2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
.char {
  transform: translateY(0);
  transition: transform 0.5s;
}

const myText = new SplitType(".menu__button");
const btn = document.querySelector(".menu__button");

const animation = gsap.to(" .char", {
  y: -35,
  stagger: 0.02,
  delay: 0.1,
  duration: 0.1,
  paused: true,

  // onStart: function () {
  //   topTitle.querySelectorAll(".word").forEach((word) => {
  //     word.classList.add("wow");
  //     word.classList.add("hidden");
  //     word.dataset.wowDelay = "1.3s";
  //   });
  // },
  // keyframes: {
  //   "0%": { transform: tra },
  //   "100%": { opacity: 1 },
  // },
});

console.log(animation);

btn.addEventListener("mouseenter", () => animation.play());
btn.addEventListener("mouseleave", () => animation.reverse());