brianecook

@Rodrigo yes, scroll performance is better without normalizeScroll(true). However, when I remove it, there is still a scroll glitch when mobile browser address bar hides/shows and the animations retrigger. Do you think it's related to it being a video heavy page?

Thanks @Rodrigo I definitely think this is part of the issue. When I use ScrollTrigger.normalizeScroll(true) the address bar shows at all times, which is helpful for preventing the glitch when address bar hides/shows on scroll, however, I've noticed that scroll performance in general considerably worsens in mobile browsers when adding normalizeScroll(true). It is more jumpy than default scroll in all mobile browsers from what I'm seeing. You can verify this on this page when viewed on a mobile device. Thanks for any advice you can provide.

I'm wondering if it's related to the mobile browser bottom navigation bar sliding in and out of the viewport on scrolling up/down. Has anyone seen this before?

Hello, I have a page where I am triggering animations within sections as they come into view using the following code: gsap.utils.toArray('[data-animate]').forEach((elem) => { const hasPinnedText = !!elem.querySelector('.c-videoBlock--pinned'); ScrollTrigger.create({ trigger: elem, start: hasPinnedText ? 'top 100%' : 'top 70%', end: 'bottom bottom', once: true, onEnter: () => { elem.classList.add('animate'); }, }); }); This works as expected on desktop. The `once` property ensures that animations are only triggered the first time a section comes into view and not each time the section exits and reenters the viewport, however, the opposite occurs on mobile. All animation seem to retrigger when the user reverses scroll direction. Can anyone help diagnose the issue? You can see it at this url, but only on a mobile device. Here is some of the css responsible for the animation: .animate { @for $i from 1 through 10 { .singleLine:nth-child(#{$i}) .line { animation: .5s ease-in-out fadeInUp forwards, .5s ease-in-out slideInBottom forwards; animation-delay: 100ms + ($i * 50), 100ms + ($i * 75); } } } I don't think the CSS is the culprit, but I'm wondering if the animation fill mode (`forwards`) has anything to do with it?

@Rodrigo Would you mind checking Safari as well? It is really poor performance in there.

That method makes pinning work a little better than before, but now mousewheel scroll is jumpy/bumpy on all browsers.

It's not as jumpy on the codepen as on the site I sent the link for, but if you use mousewheel to scroll instead of trackpad, you can see it on Safari. That jumpiness is not on Firefox or Chrome. https://codepen.io/brianecook88/pen/YzRvJrj

I have a site that pins sections to the top of the browser window with scroll trigger. This works pretty well, except in Safari, where the scrolling animation is unsmoothy, and bumpy/jumpy. It is particularly bad when scrolling with a mousewheel as opposed to a trackpad. Is there anything I can do to improve the quality of the scroll animation? gsap.utils.toArray('[data-panel]').forEach((elem) => { ScrollTrigger.create({ trigger: elem, start: () => 'top top', pin: true, anticipatePin: -3, pinSpacer: elem.parentNode, pinSpacing: false, }); });

Thanks, that did the trick!

Hello, I am having an issue where animated elements in gsap/scrollTrigger repeat their animation when the window is resized. Is there a way to prevent this? This is particularly an issue because the clients site I'm working on has an app that I think triggers a window resize on page load, so there is a double animation of all animated elements on the page.