Once again many thanks for your time!
I was able to go further with this code
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
"(min-width: 1024px)": function(){
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".frame-type-wpwa_ce_agency_history",
pin:".frame-type-wpwa_ce_agency_history",
end: "=+2900",
start: "top top",
// once: true,
scrub:true,
onLeave: function(self) {
// self.scroll(self.start); // <-- sets position to start of ScrollTrigger
self.disable()
self.animation.progress(1)
}
}
})
tl.add('scene1');
tl.to("#star", {autoAlpha:1, duration: 2}, 'scene1');
// tl.to("#disquette", {autoAlpha: 1, duration: 1}, 'scene1');
tl.to(".code", {autoAlpha: .2, duration: 1}, 'scene1');
tl.to("#first-website", {autoAlpha: 1, duration: 2});
tl.add('scene2');
tl.to("#first-website", {autoAlpha: .2, duration: 1}, 'scene2');
tl.to("#wpwaishere", {autoAlpha: 1, duration: 2}, 'scene2');
tl.add('scene3');
tl.to("#wpwaishere", {autoAlpha: .2, duration: 1}, 'scene3');
tl.to("#team", {autoAlpha: 1, duration: 2}, 'scene3');
tl.add('scene4');
tl.to("#team", {autoAlpha: .2, duration: 1}, 'scene4');
tl.to("#services", {autoAlpha: 1, duration: 2}, 'scene4');
tl.add('scene5');
tl.to("#services", {autoAlpha: .2, duration: 1}, 'scene5');
tl.add('scene6');
tl.to(".code", {autoAlpha: 0, duration: 1}, 'scene6');
tl.to("#first-website", {autoAlpha: 0, duration: 1}, 'scene6');
tl.to("#wpwaishere", {autoAlpha: 0, duration: 1}, 'scene6');
tl.to("#team", {autoAlpha: 0, duration: 1}, 'scene6');
tl.to("#services", {autoAlpha: 0, duration: 1}, 'scene6');
tl.to("#star", {autoAlpha:0, duration: 1}, 'scene6');
tl.to("#parallax-headline", {autoAlpha:1, duration: 2}, 'scene6');
},
"(max-width: 1024px)": function(){
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".frame-type-wpwa_ce_agency_history",
pin:true,
start: "top top",
end: "+=600%",
scrub:true,
toggleActions: "play none none none",
onLeave: function(self) {
// self.scroll(self.start); // <-- sets position to start of ScrollTrigger
self.disable()
self.animation.progress(1)
}
}
})
tl.to(".code", {autoAlpha:1, duration: 2});
tl.to("#star", {autoAlpha:1, duration: 2});
// tl.to("#disquette", {autoAlpha:1, duration: 2});
tl.to(".fade-out", {autoAlpha:0, duration: 1});
tl.to("#first-website", {autoAlpha:1, duration: 2});
tl.to("#first-website", {autoAlpha:0, duration: 1});
tl.to("#wpwaishere", {autoAlpha:1, duration: 2});
tl.to("#wpwaishere", {autoAlpha:0, duration: 1});
tl.to("#team", {autoAlpha:1, duration: 2});
tl.to("#team", {autoAlpha:0, duration: 1});
tl.to("#services", {autoAlpha:1, duration: 2});
},
})
So at the end I have a nice timeline depending on the media query, the animation is also paused at the end so the animation happens only once on the first down scroll. That is perfect! I've also removed the pin from the body and applied it to the wrapper of the element. So that solves the problem with the slider. But now the elements on the rest of the page are scrolling in the background. Shouldn't pin block the scroll until the animation ends? Or do I misunderstand something?