GSAP Rendering problem with Horizontal Scroll. On mozilla works thine!

[MosesPonczek]

Hello!

I creating website with horizontal scroll, with 95 sections with [Image, Year, Description]. Everyting is thine on Mozilla Firefox but... on CHROME and EDGE is very sloow and browser is freeze / stuck. I try to get performace analyze, and "Rendering" is over 10.000 ms, so it's very big. Where is the reason and diffrence with browsers? How to resolve this problem? Please help.... 

 

Check this website pw.przemekdrozniak.pl - on mozilla nad chrome to see diffrence. 

What can i do??

 

This is my JS: https://jsfiddle.net/przemekdrozniak/utn9k8jq/2/

[GSAP Helper]

A lot of performance problems come down to how browsers and graphics rendering work. Performance is a DEEP topic, and we can't do a full performance audit for free on a live site, but here are some tips: 

1. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
2. Right now, you're animating the xPercent of a bunch of individual elements, but perhaps it'd be better if you just animated their container element instead.
3. Maybe experiment with setting visibility: hidden on elements that are outside the viewport so that the browser doesn't need to render them. 
4. Try setting will-change: transform on the CSS of your moving elements. Maybe try setting force3D: true on them as well through GSAP. 
5. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
6. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
7. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
8. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
9. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
10. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
11. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!

[MosesPonczek]

Thank you, your answer is very helpful to me. The problem is animation in this elements on sections... 

When i disable all animations on elements in horizontal scroll container, the performance is sooo good

But... can i do below animations with better performance? Impressive that mozilla firefox and safari don't have any problems with many animations. Biggest problem is on chrome and edge.

 

Any advice is on gold weight! 😇

 

P.S.: When only "scrollImages" animations turned on, the performance it's OK, but... Maybe we can do it better? 🤔

 

Example:

 

scrollImages.forEach(image => {

    gsap.to(image.querySelector('img'), {

      force3D: true,

      scale: 1,

      scrollTrigger: {

        trigger: image,

        scrub: 1,

        containerAnimation: scrollTl,

        start: "left 90%",

        end: 'left 10%',

        markers: false,

      }

    })

  })

[GreenSock]

It's beyond the scope of help we can provide in these forums for free to do deeper performance audits and optimizations, sorry. We offered a bunch of tips already. If you need more help, you're welcome to reach out to us for paid consulting services but it sounds to me like the problem here is purely about graphics rendering performance (unrelated to GSAP), so you'd have to figure out what's making it so hard for Chrome and then see if there's some way to alleviate that. In my experience, one of the bigger factors is the size of the overall bounding box around the pixels that change on each frame. Especially if you've got a very large (wide or tall) element. 

 

It looks like you're still animating every child element instead of the parent. And those images are quite large. Have you tried using smaller versions of those? I see you're lazy loading images still as well. I'd strongly encourage you to go through the list above and follow as much of the advice as you can. Good luck!

[MosesPonczek]

Ok. Thank you!