Hypnotic Digital Agency

I completely understand, sorry @Rodrigo ! I will try to back to basics and focus on the trigger part first.

I ended up switching my approach to an observer and a master pin animation that triggers on a section with all animations inside as you can see here https://codepen.io/FilipeO/pen/QWXgwPW Actually my version is better than the demo because on my version tou have to wait for the first animation to finnish so that you can scroll to the second one. Now, The window.to works fine, but if I increment the master animation end time (I need to), the scroll doesnt work anymore. (the height its not the same) Should I do ScrollTrigger.refresh() ? I have tried that, but didnt work thank you very much

Hi @Rodrigo! Thank you very much ! I will try to implement that I have another doubt: At the end of that animation, I have a couple of sections, and on leave callback of the first section, I execute a gsap.to to the next section. On leave back I execute a gsap.to to the previous one Like a snap animation... My issue is, when I am on the third section, when I scroll up it executes the gsap.to to the previous section, but automatically runs the onLeave callback of the second section. I am trying to create a "tampon" area where I can navigate back to, without triggering the onLeave, but with no success. How ? just adding px on end property : scrollTrigger: { trigger: `.transport`, start: "top top", end: `bottom+=100px`, pin: true, scrub: true, } Its not solving my problem. Can you please help me ?

Hey ! I have an animation section on a website that holds 6 different timelines. All of them occurs above the previous one. The second, fourth and last one are scrollTriggers with scrub. To make it happen, I have implemented a gsap observe for that. For the fourth timeline to work (the second timeline that works with scroll), I had to set start: "top+=19%", because its taking into account the scroll I have made in the previous scrub timeline. If I set start: top, when I see it its already done (progress is 1). My Solution for that problem is terrible and that's why I am here. Since all the animations occurs on the same container I cannot rely on the container's top position. So, How could I do it ? Now I cant show the last one, because when its starts, its already done (progress is 1). The same problem. I have tried to update the ScrollTrigger, with no effect. function getSecondTL() { secondTL = gsap .timeline({ scrollTrigger: { start: "top", end: "+=2000", scrub: true, toggleActions: "restart none none reverse", onUpdate: (self) => { if ( self.progress == 0 || (self.progress == 1 && self.direction == 1) || (self.progress == 0 && self.direction == -1) ) { animating = false; } else { animating = true; } }, }, onComplete: () => { secondTL?.pause(); }, }) .to(".highlight-text", { duration: bigPhraseTime, transform: `translateX(-110%)`, }); } function getFourthTL() { fourthTL = gsap .timeline({ scrollTrigger: { start: "top+=19%", end: "+=200px", scrub: 0, toggleActions: "restart none none reverse", onUpdate: (self) => { console.log(self.progress); if ( self.progress == 0 || (self.progress == 1 && self.direction == 1) || (self.progress == 0 && self.direction == -1) ) { animating = false; } else { animating = true; } }, }, }) } function getLotties() { fadeToLottiesTL = gsap .timeline({ scrollTrigger: { start: "top+=400px", end: "+=900px", scrub: true, toggleActions: "restart none none reverse", onUpdate: (self) => { console.log(self.progress); if ( self.progress == 0 || (self.progress == 1 && self.direction == 1) || (self.progress == 0 && self.direction == -1) ) { animating = false; } else { animating = true; } }, }, }) .to(".Banner .last-phrase", { ease: "power2.out", yPercent: 0, duration: 0.7, opacity: 0, }) .to( ".Banner .lottie", { ease: "power2.out", duration: 0.7, opacity: 1, }, "<50%" ); } } function goToPanel(index: number, direction: number) { if (index > 0 && index <= 7) { if (direction > 0) { if (index == 2) { firstTL.restart(); } else if (index == 3) { getSecondTL(); // 1st Scrub Animation } else if (index == 4) { thirdTL.restart(); } else if (index == 5) { getFourthTL(); // 2st Scrub Animation } else if (index == 6) { fifthTL.restart(); lenisRef?.current.lenis?.stop(); document.body.style.overflow = "hidden"; } else if (index == 7) { getLotties(); // 3st Scrub Animation } else { intentObserver.disable(); } animating = true; } else { animating = true; if (index == 1) { firstTL.reverse(); lenisRef?.current.lenis?.stop(); document.body.style.overflow = "hidden"; } if (index == 2) { animating = true; } if (index == 3) { thirdTL?.reverse(0); lenisRef?.current.lenis?.stop(); document.body.style.overflow = "hidden"; } if (index == 5) { animating = true; fifthTL.reverse(0); lenisRef?.current.lenis?.stop(); document.body.style.overflow = "hidden"; } } ScrollTrigger.update(); currentIndex = index; } } Thank you very much !

Hi @Rodrigo! My bad ! I over-complicated it ! Once I clean the code, everything was clear. Thank you once more !

Sure, let me share with you: https://codepen.io/Filipe-Oliveira-the-bashful/pen/abgVXNO?editors=0010 So, now the first timeline is running after a single scroll, but then I would like to run scrubBannerAnimation with scroll and I am not being successful on it Could you please help me ? Thank you !

Hey ! Thank you very much for your answer! I got the first step working doing: function getLastAnimationPart() { let scrubBannerAnimation = gsap .timeline({ scrollTrigger: { start: "top", end: "+=2000", scrub: true, }, }) ... } Observer.create({ type: "wheel,touch,pointer", wheelSpeed: -1, onWheel: () => { if (!animating) { if (index == 0) { bannerAnimation.play(); } else if (index == 1) { getLastAnimationPart(); } } }, tolerance: 10, preventDefault: true, }); When bannerAnimation finnish, I increment one value to the var. When I reach the step two, the scrollTrigger animations occurs a bit laggy. Am I doing something wrong ?

Hey mates ! I have a whole ScrollTrigger timeline with pin:true and scrub:true. Lets say that timeline has 10 animations. The whole timeline occurs on the same section on screen. And that section is the first of the page. Now the client wants the animation to run without scroll but to start with a single scroll. So, a single scroll triggers the whole timeline. I am struggling to make it happen. Is that possible without making many timelines ? Thank you !

Thank you very much @Rodrigo! I will try my best !