Jump to content
Search Community

Question about smooth text animations

Black Ducas test
Moderator Tag

Recommended Posts

Hi

I'm animating texts on a webpage with this simple code that starts at page run:

 

  let texts = document.querySelectorAll("" +
    ".section__h, .section__t," +
    "body.s .e-content li, body.s .e-content p, " +
    "body.s .e-content h5, " +
    "body.s main section:nth-child(2) h1, body.s main section:nth-child(2) p");

  texts.forEach(text => {
    let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" });
    let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" });

    gsap.from(childSplit.words, {
      scrollTrigger: text,
      y: "100%",
      duration: 0.75,
      stagger: 0.05,
    });
  });

 

That is: I get all the text elements I want to be animated, then I loop them (forEach) to split them in words and animate the words.

All works well but while I scroll the page the animation are laggy, slow down, as if the browser was having a hard time processing them, like if the workload builds up more and more as I scroll down the page.

 

To improve it I put will-change: transform; on the animated elements (.text-child), it seems a little better but not that good.

 

Any advices? Is there something I'm making wrong?

Thanks

Link to comment
Share on other sites

Hey Black Ducas. Using will-change is definitely good. Besides that, you're just asking a lot of the browser - every word is being transformed so if you have a lot of words then you're animating a lot of elements. It's rendering perf issue, not anything directly related to GSAP.

 

Side notes:

  • We recommend using yPercent: 100 instead.
  • You probably want to use once: true on your ScrollTriggers.
Link to comment
Share on other sites

@ZachSaucier Hi 

the page is composed by 5-6 texts of maximum 35 words. They're short texts, that's why I thought to animate the single words. 

So you say the main problem here is the many words to process and not my code?

 

Replaced all y with yPercent and added once:true. Hard to say if it improved :)

 

There's something else I could try?

 

Could improve performance put each words animation (gsap.from(childSplit.words...) in a timeline and then run each timeline only when text is in view? Don't know if it make sense, maybe it's just the same that happens now with ScrollTrigger

 

Link to comment
Share on other sites

Perhaps if you shared with us a minimal demo of the issue we could help more? 

 

3 hours ago, Black Ducas said:

Could improve performance put each words animation (gsap.from(childSplit.words...) in a timeline and then run each timeline only when text is in view?

That shouldn't affect performance much at all. As I said, the very likely culprit for the performance issue is the rendering, not anything directly related to GSAP.

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.
×
×
  • Create New...