Poulpi

that's true! Once again many thanks for all your support!

Ok got it I missed pinSpacing: true, works like a charm

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?

Many many thanks for taking the time to answer. This is really helpful and awesome. I'll try to switch to another to see it the problem occurs with something like Slick. Just to play around. I understand the problem with pinning the body. The only problem I have is that if I pinned for exemple the class frame-type-wpwa_ce_agency_history which is the wrapper of the element, the pin isn't working and the content under the pin scroll in background. what do you mean exactly? Defining globally the timeline with the options, but using create() on breakpoints? Understood! I need the scrub here. I've removed the other part. Is there any way to make the animation persistent after it is over? Using .pause()? More globally, how do you deal with 2 timelines (depending on the breakpoints). Is it better to define 2 timelines and kill one or the other depending on the breakpoint? What is the best practise here? Once again, many many thanks for your time

Quick update. I've used a Callback onComplete to initialize the slider when the animation is over. But then the padding from the pinSpacer is create a huge amount of white at the end of the page

Hello all and thank you for this wonderful plugin! I am using it in a project. You can see the result here: https://staging-wpwa-digital.wpwa.de/de/agentur/ So on the top I have an animation using Gsap and Scrolltrigger. At the bottom of the page I have a slider using Tiny Slider which should be moving. It seems that when the animation on the top is present on the page, it bugs the slider. I've tried several things like unpinning the Gsap animation. When it is unpinned everything works fine. Since my knowledge in this domain are not that huge, does anyone have an idea or a track I could follow to find/fix the issues? Many thanks!