Code Used:

useGSAP(() => {
const tl = gsap.timeline();

tl.fromTo(
"#square",
{ height: 20 },
{ height: 100, duration: 1, ease: "power1.inOut" }
)
.to("#square", { height: 0, duration: 2, ease: "back.inOut" })
.set("#square", { height: 20 })
.to("#square", {
rotate: 270,
duration: 2,
ease: "elastic.out(1, 0.5)"
})
.to("#square", {
rotate: 0,
height: 40,
duration: 1,
onStart: function () {
  const squareElement = document.querySelector("#square") as HTMLElement;
  squareElement.textContent = "ANIMATION WITH GSAP";
},
onComplete: function () {
  gsap.to("#content", {
    opacity: 1,
    duration: 2,
    ease: "power1.out"
  });
}
});
});