pinksharpii

I'm saying, the documentation was unclear on where to put the normalizeScroll code; it sounds like a function that should go before my Timeline creation, but that caused an error, so I had to put it after my Timeline initialization.

You are a life-saver. It's a little jumpy occasionally but it's leagues better than it was before with the delays. normalize Scroll was the trick. I did have to put it after my timeline initialization which I thought was interesting. I would think before would make sense, like the default functions but I guess not. gsap.defaults({ease: "none"}); gsap.config({force3D: true}); const tl = gsap.timeline({scrollTrigger:{ trigger:"#scene", scrub: 1, pin:true, start:"top top", end:"+=500%", }}); ScrollTrigger.normalizeScroll(true);

I'm developing a new home page for a client of ours and it looks great on all devices except iPads and iPhones. The animation timeline includes all of the top of the screen with the landscape and words animating in. And it ends after the quote and bottom grass and goes to normal scroll in the blue section at the bottom. I tried making a codepen but there's just so many moving parts. You can view the code and example on our dev site here https://dev.collective-reflection.com/ But it's really delayed on ios devices. You can see when you scroll back up that there ends up being a gap for a while, before the scene snaps back into place. It's most noticeable when sometimes the grass layer disappears or jumps. The timeline animates correctly on all other devices. I've tried adding will-change: transform to the layers in CSS, and setting force3D: true in the config and turning off easing in the defaults. But it still seems delayed when scrolling back up on Apple devices. What else can I try to fix this?

I'm developing a new home page for a client of ours and it looks great for me and a few others on the team. But my PM says it's very laggy and choppy for her, with portions of the page not animating right away, and jumping down the page a few seconds after scrolling. We're both using Chrome on Mac with a trackpad but she tried other browsers on her computer and experienced the same issues there too. I tried making a codepen but there's just so many moving parts. You can view the code and example on our dev site here https://dev.collective-reflection.com/ This is my first time using GSAP for this kind of purpose. It's been years since I've touched this library but I think I did it all correctly. But if there's anything in my GSAP events that are inefficient or wrong, please let me know. I'm tempted to try the SmoothScroller plugin to see if that would make a difference but it's a large purchase and I'd like to understand if the issue lies with me and my code first before committing, or perhaps something on her computer since it seems to work on other team members' computers. I just don't know enough about GSAP to point her in a direction to fix the scrolling on her computer if that is indeed the issue.