How to solve scrollTrigger update problem with code used from gsap

There is a problem in the following code.
When the user refreshes in the middle or bottom of the page, transform: translate(0px, 600px); has the hero class, but when the user scrolls from the bottom to the top, transform: translate(0px, 600px);
It will not update and will transform: translate(0px, 0px); does not convert In fact, the hero class cannot return to its initial values.
This mode only occurs when the user refreshes in the middle or bottom of the page.
It’s like gsap can’t tell if the user is at the beginning or the end of the page.
To implement it, I got help from the following site (https://www.greatwalstead.co.uk/). But this site has exactly the same problem.
Is there a way to solve it?

Initial values:

translate: none;
rotate: none;
scale: none;
left: 0px;
top: 0.001px;
margin: 0px;
max-width: 654px;
width: 654px;
max-height: 545px;
height: 545px;
padding: 0px;
box-sizing: border-box;
position: fixed;
transform: translate(0px, 0px);

Secondary values after running gsap:

translate: none;
rotate: none;
scale: none;
inset: 0px auto auto 0px;
margin: 0px;
max-width: 654px;
width: 654px;
max-height: 545px;
height: 545px;
padding: 0px;
transform: translate(0px, 600.001px);

document.addEventListener("DOMContentLoaded", function (e) {
  gsap.registerPlugin(ScrollTrigger);
  var t,
    a = gsap.matchMedia();
  function n(e) {
    var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
      a = "power3";
    e.querySelectorAll(".gs-animate").forEach(function (e) {
      var n, r,i, o, l,s,c, d,g, u,
        m = null !== (n = e.dataset.animX) && void 0 !== n && n,
        p = null !== (r = e.dataset.animY) && void 0 !== r && r,
        v = null !== (i = e.dataset.animRotate) && void 0 !== i ? i : 0,
        y =
          (e.dataset.animOpacity,
          null !== (o = e.dataset.animScale) && void 0 !== o ? o : 1),
        f = e.dataset.animOpacity ? document.querySelector(f) : e,
        h = null !== (l = e.dataset.animScrub) && void 0 !== l && l,
        S = null !== (s = e.dataset.animStart) && void 0 !== s ? s : "top 75%",
        A = null !== (c = e.dataset.animEnd) && void 0 !== c ? c : "top 25%",
        T = null !== (d = e.dataset.animDuration) && void 0 !== d ? d : 1.5,
        j = null !== (g = e.dataset.animDelay) && void 0 !== g ? g : 0,
        q = null !== (u = e.dataset.animType) && void 0 !== u ? u : "from",
        x = {
          xPercent: m,
          yPercent: p,
          rotate: v,
          scale: y,
          ease: a,
          scrollTrigger: {
            trigger: f,
            start: S,
            end: A,
            scrub: h,
            containerAnimation: t,
          },
          delay: j,
          duration: T,
        };
      "to" == q ? gsap.to(e, x) : gsap.from(e, x);
    });
  }
  (t = document.querySelector(".gs-section-intro")),
    setTimeout(function () {
      gsap.to(".js-intro-line-wrap", { scaleX: 1, delay: 1.5 });
    }, 500),
    gsap.set(".js-intro-line-scroll", { autoAlpha: 0, scaleY: 0 }),
    gsap
      .timeline({
        scrollTrigger: {
          trigger: t,
          pin: !0,
          start: "top top",
          end: "+=600",
          scrub: 1,
        },
      })
      .to(".js-intro-line", { scaleX: 4, immediateRender: !1 })
      .set(".js-intro-line-scroll", { autoAlpha: 1, immediateRender: !1 })
      .set(".js-intro-line", { autoAlpha: 0, immediateRender: !1 })
      .to(".js-intro-line-scroll", { scaleY: 1 }),
    gsap.utils.toArray(".gs-section").forEach(function (e) {
      n(e);
    });
});

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    background-image: url(../img/bg-green.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--baseLight-color);
    position: relative;
    overflow: hidden;
    margin-block-end: 0 !important;
    transform: translate(0px, 0px);
}

.hero--inner {
    width: 100%;
    position: relative;
    margin-block-end: 3rem;
}

.hero--content {
    width: 50%;
    margin-inline: auto;
}

.hero--content>picture>img {
    margin-inline: auto;
    display: block;
    width: 140px;
    height: 180px;
}


/* for animate line */
.hero--line__wrap {
    width: 100vw;
    height: 50vh;
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    top: 110%;
    overflow: hidden;
    transform-origin: center;
}

.hero--line {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 9px;
    width: 40%;
    overflow: hidden;
    transform-origin: center;
}

.hero--line:after {
    animation: moveline 3s linear infinite;
    background-image: url(../img/intro-line-sm.svg);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    content: "";
    display: block;
    height: 100%;
    width: 200%;
}

.hero--line__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform-origin: top;
    background-image: url(../img/intro-line.svg);
    background-position: top;
    background-size: 100% 100%;
    opacity: 0;
    visibility: hidden;
}

/* hero scroll */
.hero--scroll {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero--scroll__border {
    display: block;
    padding: .5rem;
    width: 2.5rem;
    height: 4rem;
    border: 2px solid #f6be56;
    border-radius: var(--border-radius30);
}


.hero--scroll__circle {
    display: block;
    margin-inline: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #5f9893;
    animation: mouse 1000ms linear infinite;
    transition-timing-function: cubic-bezier(.33, 1, .68, 1);
}

.introduction {
    position: relative;
    padding-bottom: 10rem;
    background-color: var(--secondary-color);
}

.introduction::before {
    position: absolute;
    content: "";
    left: 20px;
    top: -100px;
    width: 250px;
    height: 182px;
    border: 1px solid green;
    background-image: url(/assets/img/vector-leaf.svg);
    background-repeat: no-repeat;
}

/* introduction--item */
ul li.introduction--item {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 6rem;
}

ul li.introduction--item:nth-child(odd) {
    flex-direction: row;
}

ul li.introduction--item:nth-child(even) {
    flex-direction: row-reverse;
}

/* introduction--text */
.introduction--text {
    color: var(--text-color);
    position: relative;
    width: 45%;
    padding-inline: 5rem 0;
    position: relative;
}

.introduction--text .introduction--title {
    display: flex;
    align-items: center;
}

.introduction--text .introduction--title h3 {
    overflow: hidden;
    display: inline-block;
    overflow: hidden;
    line-height: var(--line-height140);
}

.introduction--text .introduction--title__line{
    width:85%;
    position: absolute;
    top: 20%;
    overflow: hidden;
}

.introduction--text .introduction--title__line::after {
    animation: moveline 3s linear infinite;
    background-image: url(../img/intro-line-sm-white.svg);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    content: "";
    display: block;
    height: 9px;
    width: 200%;
}


.introduction--text>div {
    margin-block: 2.5rem 2rem;
    text-align: justify;
    font-weight: 500;
    line-height: var(--line-height140);
}

/* .introduction--video */
.introduction--video {
    width: 55%;
    position: relative;
}

ul li.introduction--item:nth-child(odd) .introduction--video {
    left: -10%;
}

ul li.introduction--item:nth-child(even) .introduction--video {
    right: -10%;
}

.introduction--video>.introduction--video__inner {
    position: relative;
    padding: 1.5rem;
}

ul li.introduction--item:nth-child(odd) .introduction--video>.introduction--video__inner {
    transform: rotate(-13deg);
}

ul li.introduction--item:nth-child(even) .introduction--video>.introduction--video__inner {
    transform: rotate(13deg);
}

ul li.introduction--item .introduction--video>.introduction--video__inner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(/assets/img/border-video-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}


.introduction--video>.introduction--video__inner video {
    border-radius: 50px;
    width: 100%;
    height: 100%;
}

.introduction--video>.introduction--video__inner .play--video {
    position: absolute;
    top: 82%;
    left: 50%;
    cursor: pointer;
    transform: translateX(-50%) rotate(10deg);
}

/* introduction--gif */
ul li.introduction--item .introduction--gif {
    display: block;
}

ul li.introduction--item:nth-child(odd) .introduction--gif {
    margin-inline-start: auto;
    margin-inline-end: 2rem;
}

ul li.introduction--item:nth-child(even) .introduction--gif {
    margin-inline-start: auto;
    margin-inline-end: 5rem;
}

.introduction--arrow {
    position: absolute;
    right: 45%;
    width: 10rem;
    transform-origin: right;
    bottom: 2rem;
}

.introduction--arrow>img {
    width: 100%;
}

/* vectors */
ul li.introduction--item:nth-child(1) .introduction--text::before {
    position: absolute;
    content: "";
    bottom: -50px;
    left: 50%;
    width: 90px;
    height: 93px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-diamond.svg);
}

ul li.introduction--item:nth-child(1) .introduction--video::before {
    position: absolute;
    content: "";
    bottom: -20px;
    left: 75%;
    width: 214px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-line.svg);
}

ul li.introduction--item:nth-child(2)::before {
    position: absolute;
    content: "";
    top: 0;
    right: -5px;
    width: 84px;
    height: 85px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-star.svg);
}

ul li.introduction--item:nth-child(3)::before {
    position: absolute;
    content: "";
    top: 10px;
    left: 30px;
    width: 110px;
    height: 99px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-circle-untidy.svg);
}

      <section class="gs-section-intro hero">
        <div class="hero--inner">
          <!-- hero content -->
          <div class="hero--content">
            <picture>
              <img src="/assets/img/logo-hero.svg" alt="" />
            </picture>
          </div>

          <!-- for animate line -->
          <div class="hero--line__wrap js-intro-line-wrap">
            <span class="hero--line js-intro-line"></span>
            <span class="hero--line__bg js-intro-line-scroll"></span>
          </div>
        </div>

        <!-- scroll down -->
        <div class="hero--scroll">
          <span class="hero--scroll__border">
            <span class="hero--scroll__circle"></span>
          </span>
        </div>

      </section>
      
      <section class="introduction gs-section" data-gs-type="items">
        <ul>
          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
                </div>
              <span class="introduction--title__line"></span>

              <div>
...
              </div>
              <img
                src="/assets/img/GWS_hockey-girl.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner">
               ...
              </div>              
            </div>
          </li>

          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
              </div>
              <span class="introduction--title__line"></span>

              <div>...</div>

              <a href="" class="btn btn--fill">درباره درخت دانش</a>

              <img
                src="/assets/img/GWS_football-boy.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner">...</div>
            </div>

            <div
              class="introduction--arrow gs-animate"
              data-anim-scale="0"
              data-anim-start="top bottom"
              data-anim-scrub="1"
            >
              <img
                src="/assets/img/icons/arrow-white-left.svg"
                alt="Arrow"
                loading="lazy"
              />
            </div>
          </li>

          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
              </div>

              <span class="introduction--title__line"></span>

              <div> ...</div>

              <img
                src="/assets/img/kindergarten.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner"> ...</div>
            </div>
          </li>
        </ul>
      </section>