Как использовать ScrollTrigger в gsap для решения проблемы обновления и преобразования в исходное состояние ⇐ CSS

[Anonymous]

В следующем коде обнаружена проблема. Когда пользователь обновится в середине или внизу страницы, преобразуйте: Translate(0px, 600px); имеет класс героя, но когда пользователь прокручивает снизу вверх, Transform: Translate(0px, 600px); Он не будет обновляться и трансформироваться: Translate(0px, 0px); не преобразуется Фактически, класс героя не может вернуться к исходным значениям. Этот режим возникает только тогда, когда пользователь обновляет середину или низ страницы. Это похоже на то, что gsap не может определить, находится ли пользователь в начале или в конце страницы. Чтобы реализовать это, мне помог следующий сайт (https://www.greatwalstead.co.uk/). Но на этом сайте точно такая же проблема. Есть ли способ решить эту проблему?
Начальные значения:

Код: Выделить всё

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);

Вторичные значения после запуска 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);
}

Код: Выделить всё

[img]/assets/img/logo-hero.svg[/img]


















[list]
[*]
class="introduction--text gs-animate"
data-anim-x="150"
data-anim-scrub="1"
data-anim-start="top bottom"
>

[img]/assets/img/vector-title-white.svg[/img]



...

[img]/assets/img/GWS_hockey-girl.png[/img]
                alt=""
class="introduction--gif"
/>


class="introduction--video gs-animate"
data-anim-x="-150"
data-anim-scrub="1"
data-anim-start="top bottom"
>

...



[*]
class="introduction--text gs-animate"
data-anim-x="-150"
data-anim-scrub="1"
data-anim-start="top bottom"
>

[img]/assets/img/vector-title-white.svg[/img]



...
[img]/assets/img/GWS_football-boy.png[/img]
                alt=""
class="introduction--gif"
/>


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


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

[*]
class="introduction--text gs-animate"
data-anim-x="150"
data-anim-scrub="1"
data-anim-start="top bottom"
>

[img]/assets/img/vector-title-white.svg[/img]



...

[img]/assets/img/kindergarten.png[/img]
                alt=""
class="introduction--gif"
/>


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


[/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... converting