richiCoder

Simple version of the code you wrote above. Here, goToPanel function is called with onEnter or onEnterBack and it creates a new tween every time the ScrollTrigger gets into the ".swipe-section". function gotoPanel(index, isScrollingDown) { ...// gsap.to(target, { xPercent: isScrollingDown ? 0 : 100, duration: 0.75, onComplete: () => { animating = false; } }); ...// } ScrollTrigger.create({ trigger: ".swipe-section", pin: true, anticipatePin: true, start: "top top", end: "+=50%", onEnter: (self) => { intentObserver.enable(); gotoPanel(currentIndex + 1, true); }, onEnterBack: (self) => { intentObserver.enable(); gotoPanel(currentIndex - 1, false); } });

@GreenSock just a question, aren't you creating too many tweens or timelines calling gsap.to or gsap.timeline into the onUp or onDown callbacks? better to handle from only on instance?

@Rodrigo Hi! Well, recently I was struggling with a project including gsap and three js, with no smooth scroll in mobile and many images, with a 3d model in the order of 30k polygons. So, it was resizing on mobile scrolling, and producing crashes in iOS. Since I was including Smooth Scrollbar (third party), I tried it on mobile and it worked great! Currently, I am dealing with lag in scrolling in some iOS devices, so I am going to implement the "will-change" workaround, hoping it will work.!

As you mentioned OSUblake, your issue on dealing with the address bar, I solved it partially using Smooth Scrollbar. As it is not a native scrollbar, it does not produce the viewport resizing.