I'm using the GSAP library for JS animations, and for some reason, when using the animations, my text (p tags, a tags, navbars...) are disabled and I can't click on them anymore for further animations, which is a bit annoying.

Does anyone know how to fix that?

const landingMsg = document.querySelector(".landing-msg")
const navBar = document.querySelector("nav")
const whoBtn = document.querySelector(".who")
const whoWhen = document.querySelector(".who-when")

const tl = new TimelineLite({ paused: true })

gsap.fromTo(
  ".landing-msg p",
  1,
  { opacity: "0", y: "100" },
  { opacity: "1", y: "0", ease: Bounce.easeOut }
)

gsap.fromTo(
  ".landing-msg p",
  1,
  { opacity: "1" },
  { opacity: "0", delay: "2", ease: Power2.easeInOut }
)

gsap.fromTo(
  "nav",
  1,
  { opacity: "0", y: "-30" },
  { opacity: "1", y: "0", delay: "1.7", ease: Power2.easeInOut }
)

tl.to(".who-when", 1, { opacity: "1", ease: Power2.easeInOut })

whoBtn.addEventListener("click", () => {
  tl.play()
})