Hello everyone!
I have some problem to use correctly Scrolltrigger.
The problem it show when i try to translate all slide to "xPercent: -100" when scroll.
var thirdPanel = document.querySelector(".third-panel");
if (thirdPanel) {
var thirdPanelRect = thirdPanel.getBoundingClientRect();
const sectionsThirdPanel = gsap.utils.toArray(".third-panel .slide");
if (sectionsThirdPanel.length > 0) {
const numSections = sectionsThirdPanel.length - 1;
const snapVal = 1 / numSections;
gsap.to(sectionsThirdPanel, {
xPercent: -100 * numSections,
ease: "none",
scrollTrigger: {
trigger: ".third-panel .slide-second",
pin: ".third-panel",
scrub: true,
snap: snapVal,
start: `top+=${thirdPanelRect.top} top`,
end: "+=" + document.querySelector(".third-panel").scrollWidth,
markers: {
startColor: "red",
endColor: "red",
fontSize: "3rem",
indent: 200,
},
},
});
}
}
For clarity please check my codepen.
My intention is to create a "stacking" slide alfter first blue slide.
I hope I was clear, open the codepen for best result.
For other information please ask.
Mattia