Lagging animation on mobile. But not all phone.

[Landrynadre]

Hello,
I create portfolio in NuxtJS 3 SSR. I apend gsap to my project and animate only position and opacity.
I test my page on diffrent phone. I noticed that on xiaomi my animation are lagging is not liquid.
U can test it in my link. What could be the problem?
Link to page: https://rucinskyd.netlify.app/

Code:
Animate about section: 

gsap.fromTo(

      "#about",

      { opacity: 0, y: "+=200" },

      {

        opacity: 1,

        y: 0,

        stagger: 0.2,

        duration: 1,

        scrollTrigger: { trigger: "#about", start: "top 80%" },

      }

  );

Animate card:

gsap.fromTo(

    "#additionalInfo .card",

    { opacity: 0, x: "-20px" },

    {

      opacity: 1,

      x: "0",

      duration: 1,

      stagger: 0.3,

      scrollTrigger: { trigger: "#additionalInfo", start: "top 40%" },

    }

  );

[GreenSock]

It's way beyond the scope of help we can provide for free in these forums to do performance audits on lives sites, but the poor performance almost surely has nothing to do with GSAP animations on that site. Here are some things I noticed from a brief glance:

1. You've got lottie SVG animations which can be very CPU intensive. And those SVGs have deeply nested artwork, like <g> elements nested literally 25 levels deep. 
2. You've got box-shadows on many elements which can be very tough on the browser to render. 
3. You applied scroll-behavior: smooth to literally everything on the entire page. That's typically a very bad idea, especially with ScrollTriggers applied. 
4. Your SVG animation (I assume lottie) is constantly playing even when it's not in the viewport, so it's eating up resources all the time. SVG can be expensive to render. 

So again, I'd be willing to bet that the load GSAP animations are putting on your device accounts for less than 2% of your overall load. I'd recommend looking into ways to minimize rendering load as much as possible. Maybe swap out box-shadow for 24-bit PNGs for the shadows. Optimize the Lottie animations, don't apply scroll-behavior: smooth, etc. 

 

Good luck!

[Landrynadre]

Okey, thanks for help! I try fix all buggs. 

[Landrynadre]

I have one more question. Scroll-behavior on html tag is ok? Or is it bad and works like for * tag..

[GreenSock]

I would definitely avoid that unless you're not doing any kind of scroll triggering or controlling of the scroll position. Think of it like setting a CSS transition on the scroll - if it gets set by JS, that property will be like "NOPE! I'm not letting that happen...I'm gonna slowly apply it instead". But again, if you never have anything that's trying to control the scroll position, it's probably okay to apply. Of course there's ScrollSmoother too.