Я действительно новичок в GSAP, и мой способ действий может быть неправильным.
Я создал ручку кода: https://codepen.io/Emma-miu/pen/dyBYKYe
Настройки ГСАП:
gsap.to(".before", {
scrollTrigger: {
trigger: ".flex",
start: "top top",
end: () => "+ = " + document.querySelector(".before").offsetWidth,
scrub: "true",
pin: "true",
toggleAction: "play none none reverse"
},
x: '-100%',
duration: 2
});
gsap.to(".after", {
scrollTrigger: {
trigger: ".flex",
start: "top top",
end: () => "+ = " + document.querySelector(".after").offsetWidth,
scrub: "true",
pin: "true",
toggleAction: "play none none reverse"
},
x: '100%',
duration: 2
});
В моем примере у меня есть div gsap-container, цвет которого меняется от белого к отображению фонового изображения. Я хотел бы «закрепить» контейнер на время анимации.
Поэтому я буду видеть только белый фоновый div до тех пор, пока фон не отобразится полностью, тогда я смогу продолжить прокрутку вниз.
Я думал, что настройки «pin: true» позволят добиться этого, но я все равно могу прокрутить вниз до красного поля.
Может кто-нибудь сказать мне, что я здесь делаю не так?
🤔 А знаете ли вы, что...
JavaScript позволяет создавать расширения для веб-браузеров, улучшая их функциональность.
Для этого вам не понадобится второй контакт ScrollTriggers...
Вам нужно немного подправить end значение и синхронизировать переход, создать значение статически. Также имейте в виду, что вы дважды закрепили один и тот же контейнер.
gsap.registerPlugin(ScrollTrigger);
gsap.to(".before", {
scrollTrigger: {
trigger: ".gsap-container",
start: "top top",
end: "+=100%",
scrub: true,
pin: true,
toggleActions: "play none none reverse"
},
x: '-100%',
duration: 2
});
gsap.to(".after", {
scrollTrigger: {
trigger: ".gsap-container",
start: "top top",
end: "+=100%",
scrub: true,
pin: false, // No needing
toggleActions: "play none none reverse"
},
x: '100%',
duration: 2
});.big-space {
width: 100%;
height: 100vh;
background-color: red;
text-align: center;
font-size: 30px;
}
.blue {
background-color: teal;
}
.flex {
display: flex;
width: 100%;
height: 100vh;
background-image: url("https://picsum.photos/200");
background-position: center;
background-size: cover;
}
.gsap-container {
position: relative;
height: 100vh;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
h2, p {
color: white;
mix-blend-mode: difference;
}
.before {
width: 50%;
height: 100vh;
background-color: white;
}
.after {
width: 50%;
height: 100vh;
background-color: white;
}<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<div class = "big-space">scroll down</div>
<div class = "gsap-container">
<div class = "flex">
<div class = "before"></div>
<div class = "after"></div>
</div>
<div class = "text-container">
<h2>Hello</h2>
<p>this is some text</p>
</div>
</div>
<div class = "big-space"></div>
<div class = "big-space blue"></div>