[scroll smoother is jerky]

I have now removed a backdrop filter and added will-change: transform to the css for the relevant elements.

Now the page also runs smoothly on my notebook.

 

 

Many THANKS

[scroll smoother is jerky]

Hello Jack,

 

THANK YOU for your help.

I will try this and give you feedback.

Maybe this will help others too.

 

Regarding GSAP performance: I am sure that GSAP is the best platform for web animations. And you do an incredibly good job.

[scroll smoother is jerky]

Hello,

I have a question about scroll smoother.

I am currently using it for a new project on my local host.

 

On my computer the site works very well and there is nothing to complain about. Now I have put the project on my notebook to present it next week. I noticed that my notebook obviously has problems displaying scroll smoother smoothly. The RTX2060 graphics card is running at about 50% when I scroll the page.

 

I partly use data-lag, pinned elements and a smooth effect with 1 second of lag.

 

Making a codepen demo is almost pointless, as it won't reflect the project. But is there a trick so that it also works on slower computers? I think that if it doesn't run smoothly on a notebook, it won't run at all on a smartphone.

 

I also can't imagine that scroll smoother was designed to only run on fast computers. So are there things to consider?

 

I would also like to add that I do not use any CSS transforms.

 

 

I am very grateful for any kind of support.

[Slow page with text effect]

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

[Slow page with text effect]

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