Горизонтальная прокрутка с фиксированным положением содержимого – GSAP ⇐ CSS

[Anonymous]

Я пытаюсь создать слайдер, похожий на раздел «Экспертиза» на этом сайте (https://akaru.fr). На справочном сайте содержимое слайдера позиционируется абсолютно и остается правильным, даже если родительский элемент имеет свойство преобразования.
Я создал демо-версию, чтобы проиллюстрировать мой текущий прогресс:< /p>

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

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".slider-wrap");

let scrollTween = gsap.to(sections, {
xPercent: (i) => -i * 100 + (i > 0 ? 0 * i : 0), // Stop at xPercent: (-100 * i) + 4.5% for each section after the first one

// xPercent: (i) => 100,
duration: (i) => 0.5 * i,
ease: "none",
scrollTrigger: {
trigger: ".section-wrap",
pin: true,
markers: true,
scrub: 0.1,
end: "bottom bottom",
pin: false,
start: "top top",
},
});

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

h1,
h2 {
margin: 0;
}
body {
margin: 0;
}
section {
outline: 1px solid rgb(117, 117, 117);
min-height: 100vh;
overflow: hidden;
}
.slide {
width: 100vw;
height: 100vh;
background: rgb(134, 134, 134);
position: fixed;
left: 0;
top: 0;
transform: none;
}
.slide2 {
background: rgb(170, 118, 118);
}
.slide3 {
background: rgb(116, 184, 139);
}
.section2 {
display: flex;
position: sticky;
top: 0;
}
.slider-wrap {
width: 100vw;
height: 100vh;
min-width: 100vw;
overflow: hidden;
}
.section-wrap {
min-height: calc(100vh * 3);
}

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

section 1






Slide 1




Slide 2




Slide 3






section 3


section 4

(--> Демо-версия CodePen)
В моей демонстрации я столкнулся с проблемами при размещении элемента div .slide в одном и том же месте, особенно если родительский элемент имеет свойство преобразования.



Подробнее здесь: https://stackoverflow.com/questions/785 ... ntent-gsap