feels like page stuck or jumpy for a moment when scroll in chrome and safari

[noob_jimi]

Hello to all heros here,

 

I'm creating a site with gsap + tailwind + lenis smooth scroll.

 

I used aspect ratio to create boxs. and grid css property.  and I applied gsap to all the items with class "fade-in-up-tween" to have fade-in effect as user scroll down.

 

It works all good in firefox.
But In chrome and safari, after scrolling few boxes, it jumps, or more it feels like page is stuck for half a second or second before it continue scrolling.

 

Here is a codepen demo using all the same properties I'm using on my website.

 

if you can't see the issue with above link, here is link to my development site: https://volume.jamesnash.net/projects/

 

Can you guys please highlight if i'm doing anything wrong or if avoiding any standard practice.

 

Thanks to all heros!

 

 

 

See the Pen poqGzGv by jimish-soni-the-flexboxer (@jimish-soni-the-flexboxer) on CodePen

[GSAP Helper]

Hm, I can't seem to replicate the issue at all. Any secrets to making it happen? 

 

Oh, it looks like maybe you have CSS transitions applied to the things you're animating with GSAP - that's terrible for performance. Every time GSAP sets a new value (60 times per second), the browser says "NOPE! This element has a CSS transition, so I'm gonna drag that change out over X seconds...", over and over again. So definitely remove those transitions.

 

If that doesn't resolve things, let us know if it only happens when you have Lenis enabled. I wonder if there's an issue there (but I doubt it).  

[noob_jimi]

Hi @GSAP Helper

 

Here you can check the live site example of my development: https://volume.jamesnash.net/projects/

 

As it was hard to create the exact replica in codepen, i had created a shorter version on codepen.

 

As you can see on above link, I've no transitions applied to 'fade-in-up-tween' class and when you scroll down, the page start to feel jerky/jumpy. (Sorry i dont know the right word to explain its jerky/jumpy, but i mean its not smooth )

[noob_jimi]

@GSAP Helper

also let me know if you like to check it when lenis is disabled. I've tested it before posting here to make sure that its not lenis issue. but still i can disable if you guys would like to test it.

[GSAP Helper]

Performance is a really deep topic. It doesn't look like this issue has anything to do with GSAP - it's more about how hard you're pressing the browser. Check out this performance capture from Dev Tools: 

 

https://greensock.d.pr/i/YrRK0y

 

Notice there are a lot of CSS animations that are triggered as you scroll down, and there's some kind of "commit" that Chrome is doing at a certain point that takes a while and involves calculating intersections. 

Here are some general performance tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. 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. 
5. 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)
6. 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.
7. 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. 
8. 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.
9. 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! 

[noob_jimi]

@GSAP Helper

 

Thanks for the explanation sir. It helped a lot.

 

Using a chromDevTool, i found that when I hover any box which shows the overly of text for the box, and then if i scroll the wheel, it shows a red/drop frame in meter. I removed any extra animation or code for the hover animation but it still shows the lagging. Couldn't find a fix for that yet.

 

I understand its may not be a GSAP issue. Just wanted to give you an update on this thread.

Thanks again.