<h1>GSAP Starter Template</h1>
<a hoverstagger="link" href="#" class="button w-inline-block">
  <div class="div-block-3">
    <div hoverstagger="text" id="title-a">Hello !</div>
    <div hoverstagger="text" class="text-block-3" id="title-aa">Hello !</div>
  </div>
</a>

console.clear(); // Start with a clean console on refesh
// //gsap.to()... infinity and beyond!

// //To learn more about using GreenSock's bonus plugins for free on CodePen visit: https://gsap.com/trial
gsap.registerPlugin(SplitText);
const btn = document.querySelector(".button");

var split = new SplitText("#title-a", { type: "chars" });
var splitb = new SplitText("#title-aa", { type: "chars" });
let isComplete = true;

const tl = gsap.timeline({
  // Create a timleine to control all the animations
  paused: true, // Set it to paused, because we want to .play() them at a specific moment
  onComplete: () => isComplete = true,
});

tl.fromTo(
  split.chars,
  {
    y: 0
  },
  {
    duration: 0.5,
    y: -20,
    stagger: 0.05
  }
);

tl.fromTo(
  splitb.chars,
  {
    y: 38
  },
  {
    duration: 0.5,
    y: -20,
    stagger: 0.05
  },
  "<" // Start tween at the same time as previous tween, check the docs for more info position parameter https://greensock.com/position-parameter
);

// Normal Javascript, add event listener to a specifc elment
btn.addEventListener("mouseenter", () => {
  if (!isComplete) return;
  isComplete = false;
  tl.restart();
});
btn.addEventListener("mouseleave", () => {
  if (!isComplete) return;
  isComplete = false;
  tl.restart();
});