Performance Issue on mobile

[Meg Supernova]

Hi! This is the first time I have ever made a request, and it is as follows:
on my website https://margheritagregoriferri.it I am implementing animations with gsap and lenis which work perfectly from desktop, but from mobile (looking at the device) they are slow and jerky. I don't understand how this is possible, can anyone help me out? I enclose the code of one of the component that has the problem.

Thanks a lot

HomeIntro.scss HomeIntro.client.ts HomeIntro.astro

See the Pen zxxgLpB by MegSupernova (@MegSupernova) on CodePen.

[mvaneijgen]

Hi @Meg Supernova welcome to the forum!

 

If I open the demo you've shared on my mobile device everything is perfectly smooth, so we can really comment on the issue you're having. Instead of using lenis have you tried our smooth scroll library aptly named ScrollSmoother? https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

some notes on your code is there any particular reason you sometimes you yPercent: 100, and other times y:'100%', when using percent values its is better to use the first one. 

 

Personally I would not split my text in an onEnter of a  ScrollTrigger I would do it on page load and then just have the ScrollTrigger control the animation. That is a lot of work you put on the browser, see line 62 in your demo 

 

Hope it helps and happy tweening! 

[Meg Supernova]

Thankyou Mvaneijgen, i'll try your suggestions!
The demo on codepen works correctly, but the problem is visible on the online site

[GSAP Helper]

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!

[Meg Supernova]

Thanks everybody!
it seems that it was the  CSS filters !! now works great, thaaaaaaaaankssssss!!!

[Rodrigo]

Hi,

 

Great to hear that you were able to pinpoint the issue! 🥳 Indeed filters are terrible for performance 🙈

 

As a suggestion you can complement CSS Media Queries to check screen size with ScrollTrigger's isTouch property in order to disable filters on devices:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

Happy Tweening!