Как пережить контейнер в прокрутке с помощью Scrolltrigger от GSAP ⇐ CSS

[Anonymous]

В этом коде, https://codepen.io/redbluepurple/pen/wvzzqqx, я пытаюсь достичь эффекта, аналогичного https://koalastudios.ca/projects (без анимации), где изображения при прокрутке влево , перейти к названию. Но в моей реализации изображения остаются в контейнере и не перемещаются над заголовком. < /P>
gsap.utils.toArray(".slideText").forEach(text => {
gsap.timeline({
defaults: {ease: "none"},
scrollTrigger: {
scroller: text.closest(".horizSlider"),
horizontal: true,
trigger: text.closest(".slide"),
start: "left right",
end: "left left",
scrub: true
}
})
.fromTo(text, {x: 250}, {x: -250}, 0)
.from(text.nextElementSibling, {scale: 0.8}, 0)
});
< /code>
your.main{
display:grid;
grid-template-columns: 1fr 1fr;
}
.horizSlider {
position: relative;
white-space: nowrap;
overflow: auto;
}
.horizSlider .slide {
display: inline-block;
position: relative;
}
.slideImage {
transform-origin: bottom left;
}
< /code>

Scroll the slider to the right to see some parallax effects






< /code>
I tried to replicate the effect using CSS and JavaScript without using a library but that didn't work. For example, I tired to set the position of the image container to absolute, but them it would take the whole width even the titles. I tried to use an event listener to hear for the scroll and then set a margin left but that didn't work also. The original effect is made using this library react/three drei, but it is for react and my project is made in vanilla JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/781 ... er-by-gsap