Slow page with text effect

[Sergio1981]

I am using the text plug in on a page and have poor site speed performance as a result. It also jerks on some devices. When I deactivate the text effect, I have 99% in the Lighthouse Speed Test, and 29% when it is activated. 

 

Is there a better way to avoid such an effect?

 

Here is the code for the effect:

 

gsap.registerPlugin(ScrollTrigger, SplitText);

console.clear();

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const captions = selectAll(".text-container");

captions.forEach((caption, i) => {   
    var splitTextTitle = new SplitText(caption.querySelector(".text-fx"), {type:"chars, words"}),
    lettersTitle = splitTextTitle.chars;

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: caption,
            toggleActions: "play reset play reset",   
        }
    });

    tl.from(lettersTitle, {
        opacity:0, yPercent:-100, ease:"power2", duration: 0.2, stagger: { each: 0.005, }
    });
    
});

 

If someone has a suggestion, I would be very happy.

Thanks a lot

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Sergio1981 welcome to the forum!

 

Sorry, but this is just 1/3 of your code that could cause an issue. Where is the HTML and CSS, that way we have the whole picture and can better help you debug. That is why we ask for a minimal demo, right now we can only guess what the issue could be. 

 

Do you maybe have a CSS transition: all 0.3s ease; on the property your are trying to animate with GSAP? 

 

Again we can only guess right now, so it is a shot in the dark. 

 

[Sergio1981]

Hello and thank you for your comments.

I am aware of the problems with analyses without a demo. Creating a minimal demo that reflects the project is not really easy and would take some time.

 

I just thought that there might be known mistakes that can cause such problems.

 

I'll try it step by step on my system and if I don't get it right, I'll get back to you.

 

Kind regards and THANK YOU 💗

 

Sergio

[GreenSock]

Animating a bunch of individual text characters simultaneously can certainly be difficult on the browser's rendering engine. I'd try setting the CSS will-change: transform on those elements you're animating, just to see if that helps. It's not a GSAP thing - it's a browser graphics rendering thing. And make absolutely sure you don't have CSS transitions applied to those elements. 

Good luck!