Javascript to Typescript

[knabe]

Hi!

 

I wrote the following code in Javascript for HTML:

document.addEventListener("DOMContentLoaded", function () {
    let tl = gsap.timeline({ paused: true });
  
    tl.to(".menu-overlay", {
      duration: 1,
      clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
      ease: "power2.out",
    });
  
    tl.from(
      ".menu-link, .btn",
      {
        opacity: 0,
        y: 60,
        stagger: 0.05,
        duration: 0.75,
        ease: "power1.inOut",
      },
      "<",
    );
  
    tl.to(
      ".video-preview",
      {
        duration: 1,
        height: "200px",
        ease: "power2.out",
      },
      "<",
    );
  
    tl.to(
      ".menu-divider",
      {
        duration: 2,
        width: "100%",
        ease: "power4.out",
      },
      "<",
    );
  
    function openMenu() {
      document.querySelector(".menu-overlay").style.pointerEvents = "all";
      tl.play();
    }
  
    function closeMenu() {
      document.querySelector(".menu-overlay").style.pointerEvents = "none";
      tl.reverse();
    }
  
    document.querySelector(".menu-open-btn").addEventListener("click", openMenu);
    document
      .querySelector(".menu-close-btn")
      .addEventListener("click", closeMenu);
    tl.reverse();
  });
 

And it works perfectly fine. Now I want to use this in my React typescript app but the animation isn't working. Codepen: https://codepen.io/J-K05/pen/wvNmYQw  From what I've understood, you shouldn't use document.query with ReactJS and instead use useRef or similar, what would be the best solution? I'm pretty new to this so bear with me :)

See the Pen wvNmYQw by J-K05 (@J-K05) on CodePen

[ryan_labar]

This is probably your best starting point for setting up/moving animations into React: https://gsap.com/resources/React
 

[GreenSock]

Yes indeed, @ryan_labar is correct. Also, this might make things a little easier (we haven't announced it quite yet officially): 

https://www.npmjs.com/package/@gsap/react