Controls and events

const tl = gsap.timeline({
  paused: true,
  onComplete: () => console.log("done")
});

tl.to(".box", { x: 300, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 });

document.querySelector(".play").addEventListener("click", () => tl.play());
document.querySelector(".pause").addEventListener("click", () => tl.pause());
document.querySelector(".reverse").addEventListener("click", () => tl.reverse());
document.querySelector(".restart").addEventListener("click", () => tl.restart());

const menuTl = gsap.timeline({ paused: true });

menuTl.to(".menu", { height: 220, duration: 0.4, ease: "power2.out" })
  .from(".link", { y: 20, opacity: 0, stagger: 0.1 }, "-=0.2");

const menu = document.querySelector(".menu");

menu.addEventListener("mouseenter", () => menuTl.play());
menu.addEventListener("mouseleave", () => menuTl.reverse());