Jump to content
GreenSock

Saraf

Animations are laggy :(

Recommended Posts

Hi Devs, 
I don't know what's wrong in my code , the animations are super slow in firefox and sometimes in chrome as well.
I have two issues 

  1. Translating animations are super slow in firefox and sometimes in chrome
  2. Text animations are flickering on scroll

 

I use SVG as react components

 

Can u guys please help me improve my code. Im using NextJs and GSAP3. 

Thanks.

    let timeline = gsap.timeline({
      delay: tableAndAbove ? 0.5 : 0,
      scrollTrigger: !tableAndAbove && {
        trigger: "#sellersLandingMobileContainer",
        start: "30% 20%%",
      },
    });
    if (tableAndAbove) {
      timeline.from("#sellersLandingMobile", {
        duration: 1,
        scale: 0.8,
        autoAlpha: 0,
        rotation: 0.01,
      });
      timeline.from(
        "#sellersLandingMobile",
        {
          duration: 1,
          translateX: "20%",
          ease: "expo.out",
          rotation: 0.01,
        },
        "-=0.6"
      );
    }
    timeline.to(
      "#sellersLandingHeroText .hide-text",
      {
        duration: 0.8,
        ease: "expo.out",
        translateY: 0,
        delay: 0,
        autoAlpha: 1,
        rotation: 0.01,
      },
      "-=0.9"
    );
    timeline.from(
      "#sellersLandingCTA",
      {
        duration: 0.5,
        ease: "expo.out",
        scale: 0.5,
        autoAlpha: 0,
        rotation: 0.01,
      },
      "-=0.5"
    );
    document.querySelectorAll("#sellersLandingStoreLink").forEach((el) => {
      timeline.from(
        el,
        {
          duration: 0.5,
          ease: "expo.out",
          translateY: 20,
          autoAlpha: 0,
          rotation: 0.01,
        },
        "-=0.3"
      );
    });
 const images = [
    "#sell24By7Img",
    "#chatBroadcastInvoiceImg",
    "#lightningfastpaymentsImg",
  ];
  const sections = [
    "#sell24By7TextContainer",
    "#chatBroadcastInvoiceTextContainer",
    "#lightningfastpaymentsTextContainer",
  ];
  useScroll();
  useEffect(() => {
    gsap.to("#punchGrowthHeading .hide-text", {
      scrollTrigger: {
        trigger: "#punchGrowthHeading",
        start: "top 80%",
      },
      duration: 1,
      ease: "expo.out",
      translateY: 0,
      rotation: 0.01,
    });

    images.forEach((el, index) => {
      gsap.from(el, {
        scrollTrigger: {
          trigger: el,
          start: "30% 80%",
        },
        duration: 1,
        ease: "expo.out",
        autoAlpha: 0,
        transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`,
        perspective: 1000,
        rotation: 0.01,
        force3D: true,
      });
    });

    sections.forEach((el) => {
      gsap.to(`${el} .hide-text`, {
        scrollTrigger: {
          trigger: el,
          start: "30% 80%",
        },
        duration: 1,
        ease: "expo.out",
        translateY: 0,
        rotation: 0.01,
      });

      gsap.from(`${el} p`, {
        scrollTrigger: {
          trigger: `${el} p`,
          start: "30% 80%",
        },
        duration: 1,
        ease: "expo.out",
        autoAlpha: 0,
      });
    });

 

Link to comment
Share on other sites

Hey Saraf,

 

Somebody may spot something but It's generally pretty hard to diagnose issues  just seeing code without context. If possible try to create a reduced test case on codepen or al least a link to the site if so we can see what's happening.

 

Also you should probably review the best ways to work with transforms in gsap in the cssPlugin docs, using gsaps properties may be more performant:

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

 

  • Like 2
Link to comment
Share on other sites

@Visual-Q 

This is the site url
https://brave-poitras-97d8a6.netlify.app

https://brave-poitras-97d8a6.netlify.app/buyers

https://brave-poitras-97d8a6.netlify.app/sellers

And the hook useScroll() has the following code

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 
function useScroll() {
if (typeof window !== `undefined`) {
gsap.registerPlugin(ScrollTrigger);
}
}
 
export default useScroll;


 

Link to comment
Share on other sites

You definitely shouldn't be doing something like this:

// BAD (slow)
transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`,
  
// GOOD: 
x: index === 1 ? 100 : -100

And "y" is the same as "translateY". 

 

A recent release of Chrome has a bug that seems to be causing rendering issues (not GSAP-specific). You can try setting will-change: transform on the problematic elements.

 

Other than that, it's beyond the scope of these forums to do a full performance audit on a live web site. Your options are: 

  • Hire someone to do a performance audit (feel free to contact us or just post in the "Jobs & Freelance" forum)
  • Recreate the issue in a minimal demo with only the absolute smallest amount of code and elements. See https://greensock.com/demo

Good luck!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, GreenSock said:

A recent release of Chrome has a bug that seems to be causing rendering issues (not GSAP-specific). You can try setting will-change: transform on the problematic elements.

 

Hello, any idea where i can read more about this Chrome issue?

I think recently im seeing text flickering on 3 sites that i used gsap to animate texts. was wondering why they started to behave in that way when it was fine before.

 

thanks in advance.

  • Like 1
Link to comment
Share on other sites

@mfk We have a thread about it here:

 

but I haven't come across an actual bug report for Chrome yet.

  • Like 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.
×