ios devices have choppy ScrollTrigger animation

[pinksharpii]

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?

[Rodrigo]

Hi,

 

Unfortunately is really hard for us to debug a live site. The one thing I can see happening is that the browser's address bar is showing/hiding as you scroll up/down, so maybe you could try using ScrollTrigger's normalizeScroll method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

This doesn't seem related to screen size as I tried the link in small widths on desktop so is not related to that or something in your CSS that could be the reason.

 

Give normalizeScroll a try and let us know.

 

Hopefully this helps.

Happy Tweening!

[pinksharpii]

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);

 

[GreenSock]

Wait, are you saying it behaves differently if you put ScrollTrigger.normalizeScroll(true) before you create the timeline? That sounds odd to me. Got a minimal demo that clearly shows the difference?

 

Performance is almost always related to graphics rendering in the browser, not GSAP. The only time I saw it chug a bit on my iPhone was when you've got all those SVG images moving and fading on top of each other. SVGs are inherently tough on the processor rendering-wise. You might want to try using PNG files for those (I noticed you've got transparency) just to see if it improves things at all. And/Or set will-change: transform on the things you're moving. I know you said you did that, but just make sure it's on the actual elements that are getting animated. And remember that the smaller the bounding box around the changing pixels, the better. Changing a lot of pixels is harder on the CPU.  

 

 

[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.

[GreenSock]

It shouldn't matter if you put it before or after. What error did you get? Seems to work fine for me either way: 

See the Pen oNQzoXz?editors=0110 by GreenSock (@GreenSock) on CodePen