Bornfight

@akapowl thank you for the answers. I have tried to replicate the behavior with this approach but can't seem to make it work. Tried multiple Observer callback functions, and their combinations (e.g. onWheel with onLeft and onRight), tried to lock the axis on X, etc. Yet, still didn't manage to make it work with trackpad horizontal scrolling. I understand this is an edge case and something that is specific to macbook users and trackpads but wouldn't like to let go of it if there is a possibility to make this work. Any additional guidance is much appreciated. Updated codepen with Observer example: https://codepen.io/karlovidek/pen/GRwBVKo

Hi guys, I have set up horizontal scrolling page using scrollTrigger and that works just fine (Lenis smooth scroll is present if that in any case impacts the following issue at all). Horizontal scroll: let scrollTween = gsap.to(this.scroll, { xPercent: -100, x: () => "100vw", ease: "none", scrollTrigger: { pin: this.wrapper, trigger: this.wrapper, start: "left left", end: () => `+=${this.scroll.offsetWidth} bottom`, scrub: true, }, }); What I need to accomplish is if users on trackpads (macbook) scroll horizontally (swipe with two fingers in the horizontal direction on trackpad) scrollTrigger updates and everything works as a "normal" scroll. overscroll-behavior-x: none; is also added to body to prevent default gestures on trackpad — browser history back/forward. Is there a way Observer can come in to handle this and update scrollTween somehow? Thanks...

Hello guys. Had the same problem (while using ScrollSmoother and ScrollTrigger combined in the Next.js project animations were instant, as if there was no duration/transition applied at all). How I approached this and kinda solved this is that I have set the immediateRender to false on all of my animations — the GSAP docs say that this property is applied in fromTo method by default, and also on everything that has ScrollTrigger applied. Additional thing I had to do to avoid flashes when animated elements enter the viewport (trigger/start in my case), I had to set initial state in the CSS of animated elements (e.g. opacity to 0). Hope this helps you guys @GreenSock to solve this specific issue and also all of you guys to make a temporary workaround until its solved.

Can confirm that delay is not working with scrolltrigger gsap 3.6.1 delay not working both hardcoded value or props typeof delay is number @GreenSock any luck with fix maybe? my react implementation is: useEffect(() => { gsap.to(revealElements.current, { scrollTrigger: { trigger: revealElements.current || '', start: 'top 90%', toggleActions: 'play none play none', scrub: false, markers: false, }, autoAlpha: 1, y: 0, duration: 1.3, delay: delay || 0, ease: 'customDefault', }); }, [delay, revealElements]);