My animation is playing on page refresh(I don't want that to happen)

[sumukha]

import React, { useEffect, useRef, useState } from "react";
import { RiMenu2Fill } from "react-icons/ri";
import { BsChevronRight } from "react-icons/bs";
import { Nav } from "./styles";
import NavMenu from "./navMenu";
import { gsap } from "gsap/dist/gsap";

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const wrapperRef = useRef(null);
  const children = gsap.utils.selector(wrapperRef);

  const tl = useRef<gsap.core.Timeline>();

  useEffect(() => {
    tl.current = gsap.timeline({ defaults: { duration: 1.1 }, paused: true });

    tl.current.paused();
    tl.current
      .to(
        [
          children(".logo"),
          children(".bookNow"),
          "#hero .title",
          "#hero button",
          "#hero #features",
        ],
        {
          autoAlpha: 0,
          duration: 0.6,
          ease: "Expo.in",
        }
      )
      .to(
        children("#navMenu"),
        {
          x: 0,
          duration: 0.7,
          ease: "Expo.in",
        },
        "-=0.3"
      )
      .from(children(".menuName"), {
        stagger: 0.05,
        autoAlpha: 0,
        y: 30,
        ease: "Power1.ease",
      });
  }, []);

  useEffect(() => {
    if (menuOpen) {
      tl.current!.play();
    } else {
      tl.current!.reverse(1.5);
    }
  }, [menuOpen]);

  const handleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <div ref={wrapperRef}>
      <NavMenu menuOpen={menuOpen} />

      <Nav>
        <div className="container">
          <div className="navbar__menu">
            <div className="menu" onClick={handleMenu}>
              <span>
                <RiMenu2Fill />
              </span>
              <span>Menu</span>
            </div>

            <div className="logo">
              <span>Platino</span>
              <span>Hotel - Restaurant</span>
            </div>

            <div className="bookNow">
              <span>Book Now</span>
              <span>
                <BsChevronRight />
              </span>
            </div>
          </div>
        </div>
      </Nav>
    </div>
  );
};

export default Navbar;

I very new to using gap with nextjs.  My animation is playing on page refresh(i don't want that), also button takes time to disappear from the  window. Can anyone provide the solution?

 

Video Link :- https://github.com/Sumukha210/platino/blob/main/public/localhost_3000 - Google Chrome 2022-01-31 17-39-55.mp4

Code :- https://github.com/Sumukha210/platino

[elegantseagulls]

This seems like more of a Next JS question than a GSAP question.
That said, it's much easier for us to debug something with a minimal demo:

 

Also, for good insight on using GSAP with React (Next JS) be sure to check out:

 and