Jump to content
GreenSock

Landrynadre

Lagging animation on mobile. But not all phone.

Go to solution Solved by GreenSock,

Recommended Posts

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%" },
    }
  );
Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×