Kopp001

Hi everyone, I'm in the middle of a bit of a pickle on a web project I'm working on and could really use your expertise. I've got this website where I'm using SWUP for page transitions, which necessitated me to have my main element position fixed and apply the scrolling behavior directly to it. It works well for the most part, except I'm running into a hiccup with GSAP's ScrollTrigger. Here's the nub of it: the ScrollTrigger's start marker, which I need to stick to the top of the viewport, has a mind of its own. It seems to be taking a leisurely stroll up the screen whenever I scroll, thanks to the inertia from Lenis, before snapping back into place. This isn't quite the behavior I was hoping for—I need that marker to be steadfast at the top, come what may with the scrolling. For a clearer picture, I've whipped up a CodePen to showcase what's happening... I've tried to outsmart it by dynamically recalculating the start position and even attempting to offset it based on Lenis' scroll position, but no dice so far. Does anyone have experience taming this kind of behavior? How can I anchor the ScrollTrigger start marker to the top of the viewport so that it's immune to the whims of Lenis-induced inertia? Any nudge in the right direction would be a lifesaver! Cheers!

Thanks for the detailed explanation – it's super helpful. I'm trying to wrap my head around the mechanics of it, though. I've set up a simple scroll trigger in a CodePen https://codepen.io/saiykoh/pen/WNmQVvd where the trigger is supposed to activate when the top of the element hits 300 pixels from the bottom of the viewport. What's puzzling me is that with ignoreMobileResize set to its default (false), the start marker doesn't seem to move even when the iOS address bar shows or hides. I expected the marker to shift due to the change in viewport height, but it stays put, so I'm not seeing the difference I anticipated. I thought it might be a CodePen iframe quirk, where the address bar doesn't hide on scroll, so I also replicated the test on a standalone site https://gsap-scrolltrigger-test.netlify.app/ to make sure the address bar behaves as it typically would on a regular webpage. Could you help me understand what exactly changes with the ignoreMobileResize set to true? Because from my tests, the behavior seems identical with or without it. Thanks again for your patience and the assist here!

Hi ! Just gave the ignoreMobileResize config a shot, and it worked like a charm – no more scroll interruptions. It seems like the issue was indeed tied to the Safari toolbar appearing and disappearing. This fix nailed it, so thank you for that! On the flip side, normalizeScroll(true) just threw things off, making scrolling on iOS pretty much a no-go. With the ignoreMobileResize solution in place, I'm curious about the potential downsides. If it's such an effective fix, I'm wondering why it's not a default setting, or if there's any trade-off I'm not seeing. Could this be the silver bullet for the scroll issue, or is there a catch? Seriously, big thanks for the prompt and effective solution. It’s a huge relief.

Hi Cassie, Noted on the refresh rate drop in Low Power Mode. I've seen the same scrolling hiccups on an Android device in power save mode as well. The interruptions aren't consistent - sometimes it happens after a single scroll, other times it might take five or more. On my site, I use GSAP's Scroll Trigger for basic class toggling—no scrubbing, just simple onEnter and onLeave callbacks. Yet, the mere presence of Scroll Trigger seems to be enough to cause these random scrolling stops. I've started to notice this issue on any site that uses Scroll Trigger. It's like once you see it, you can't unsee it. Especially since I've been trying to replicate the issue by intentionally scrolling fast to test it out. It's a pesky problem, considering other libraries don't cause the same behavior. Definitely seems tied to GSAP's Scroll Trigger when in power save mode. Not a deal-breaker, but it's annoying and throws off the smoothness we're all aiming for. Any ideas why this might be happening or ways to work around it?

Hello GSAP Community, I'm reaching out to share and seek guidance on a specific issue I've encountered with the Scroll Trigger in GSAP, particularly on mobile devices. Device and Context: Device: iPhone 15 Pro Operating Mode: Battery Power Save Mode Issue Description: While using my iPhone in Battery Power Save Mode, I experience a consistent and disruptive issue on all websites that use GSAP's Scroll Trigger. The issue manifests as an intermittent interruption of the scrolling motion, resulting in a jarring and "janky" user experience. This occurs every two to three scrolls, where a smooth scrolling motion is abruptly halted. Key Observations: This issue seems exclusive to GSAP's Scroll Trigger. I have not observed similar behavior with other scrolling animation libraries like anime.js or with native JavaScript Intersection Observers. The problem persists across all websites employing GSAP's Scroll Trigger, suggesting it's not related to a specific implementation error on my part. Purpose of This Post: To determine if this is a known issue with GSAP, especially in the context of mobile devices operating in power-saving modes. To inquire if others in the community have faced similar challenges and, if so, how they addressed them. To seek potential solutions or workarounds that ensure smoother scroll-triggered animations in power-saving modes. Attached Material: Enclosed is a video demonstrating this issue, using the official GSAP website as an example. This should provide a clear illustration of the janky scrolling behavior I've been experiencing. I am looking forward to any insights, suggestions, or shared experiences regarding this matter. Understanding whether this is a recognized limitation within GSAP or an external factor related to device-specific functionalities would be immensely helpful. Thank you in advance for your time and assistance. Kevin RPReplay_Final1704190564_compressed.mp4

Oh yeah, that could work, wouldn’t there be performance issues if I have around 20 paragraphs on my page or does this have no repercussions on performance? thank you so much for your quick answer ! Kopp

Hi, I've setup a little scrolltrigger that reveals words of each paragraph. What I would like to do is revert to a normal p tag once an animation has been executed. So not once all of the animations have run but as things progress to revert them one by one? Is this possible with GSAP? Thank you in advance for your help! Kopp

Hi @Rodrigo, I was on GSAP 3.11.2 and I updated to 3.11.3 and it fixed the problem Do you know why the 3.11.2 was an issue? Thanks for your help and have a wonderful day! Kopp

Hi, I have a bug where the page jumps to the top when I resize the browser window and when I start scrolling, it jumps back to where I was. I've seen in the dev console that the transfrom: matrix3D goes to 0 on resize, but when I start scrolling again, the matrx3d goes back to where I was on the page. I know its better to do a small demo version but maybe its a known bug or I'm missing a parameter somewhere? I've also done a video so that you can see what I'm talking about: Thanks in advance for your help and have a nice day! Kopp