So i was trying to create my personal site and I want that the title text slides up when we scroll into it but in this code this works fine first but it does’nt work after a reload…. someone please help!

import React, { useLayoutEffect, useRef } from "react";
import "./SecondSection.css";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const SecondSection = () => {
  const titleRef = useRef(null);

  useLayoutEffect(() => {
    gsap.fromTo(
      titleRef.current,
      { y: "1700px" },
      {
        y: "0px",
        duration: 1.1,
        ease: "power4.out",
        stagger: 0.1,
      }
    );

    const scrollTrigger = ScrollTrigger.create({
      trigger: titleRef.current,
      start: "top center", // start the animation when the top of the trigger element reaches the center of the viewport
      end: "bottom center", // end the animation when the bottom of the trigger element reaches the center of the viewport
      animation: gsap.fromTo(
        titleRef.current,
        { opacity: 0, y: 100 },
        { opacity: 1, y: 0, duration: 1.1, ease: "power4.out" }
      ),
      once: true, // play the animation only once
    });

    // Cleanup function
    return () => {
      scrollTrigger.kill(); // Remove the ScrollTrigger instance
    };
  }, []);

  return (
    <div className="main-about-second-section">
      <div className="about-second-section">
        <div className="rxy">
          <div className="second-title">
            <h1>
              <div className="xzy">
                <h1 ref={titleRef}>Who am i?</h1>
              </div>
            </h1>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SecondSection;

I tried using scrollTrigger and it also worked in the first time but does’nt work after a reload