The JS is basically this. I think the HTML and CSS doesn't matter maybe.
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
"all": function () {
// OPACITY 1 THE OBJECT .opacity ON SCROLL
const opacity = gsap.utils.toArray('.opacity');
opacity.forEach(opacity => {
gsap.to(opacity, {
scrollTrigger: {
start: "0% 90%",
end: "0% 60%",
trigger: opacity,
scrub: true,
// markers: true,
},
opacity: 1
})
});
// HOME TEXT SLIDING LEFT
gsap.to(".scrollLeft", {
scrollTrigger: {
trigger: ".scrollLeft",
scrub: 1,
start: "50% 90%",
end: "0% 10%",
pin: true,
// markers: true,
},
xPercent: -43
})
// GLOBAL TITLE SLIDING LEFT
const titleLeft = gsap.utils.toArray('.titleLeft');
titleLeft.forEach(titleLeft => {
gsap.to(titleLeft, {
scrollTrigger: {
start: "0% 90%",
end: "0% 10%",
trigger: titleLeft,
scrub: 2,
},
xPercent: -6
})
});
const titleLeft2 = gsap.utils.toArray('.titleLeft2');
titleLeft2.forEach(titleLeft2 => {
gsap.to(titleLeft2, {
scrollTrigger: {
start: "0% 90%",
end: "0% 10%",
trigger: titleLeft2,
scrub: 2,
// markers: true,
},
xPercent: -15
})
});
},
"(min-width: 799px)": function () {
// PHOTOS SLIDING
gsap.to(".Dev", {
scrollTrigger: {
trigger: ".Dev",
scrub: 1,
start: "50% 70%",
end: "50% 20%",
// markers: true,
},
xPercent: -30
})
gsap.from(".Mkt", {
scrollTrigger: {
trigger: '.Mkt',
scrub: 1,
start: "50% 70%",
end: "50% 20%",
// markers: true,
},
xPercent: -30
})
},
"(max-width: 799px)": function () {
// HOME TEXT SLIDING LEFT
gsap.to(".scrollLeft", {
scrollTrigger: {
trigger: ".scrollLeft",
scrub: 1,
start: "50% 90%",
end: "100% 0",
pin: true,
markers: true,
},
x: -1300
})
// PHOTOS SLIDING
gsap.to(".Dev", {
scrollTrigger: {
trigger: ".Dev",
scrub: 1,
start: "50% 70%",
end: "50% 20%",
// markers: true,
},
xPercent: -76
})
gsap.from(".Mkt", {
scrollTrigger: {
trigger: '.Mkt',
scrub: 1,
start: "50% 70%",
end: "50% 20%",
// markers: true,
},
xPercent: -76
})
}
});
