gsap + three js - lagging on macbook but okay on mobile + windows

[bultano]

Hi guys,

 

I've been making a test project using react three fibre + gsap, link below:

https://moving-vehicles.vercel.app/

 

However, when i got round to testing on multiple devices i found that it severerly lags on macbooks.

 

On all windows devices ive tried it runs fine and mobile devices but then on macbook it just lags like crazy.

 

Is anyone able to replicate and think of a reason this may be happening?

 

I'm using intersection observers to detect which slide the user is on but the rest is quite lightweight

 

Thanks

[Rodrigo]

Hi,

 

Unfortunately I can't test on Mac, but on ubunto 20 & 22 works fine on the latest Chrome and Firefox.

 

Have you tried ScrollTrigger instead of Intersection Observer? ScrollTrigger should be far more efficient and CPU friendly than IO. Also you could try GSAP Observer (included in ScrollTrigger) as well:

https://greensock.com/docs/v3/Plugins/Observer

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()

 

Hopefully this helps.

Happy Tweening!

[bultano]

Hi

 

Thanks for your comment, i switched it over to observer and had the same issue.

 

On experimenting on safari, I found a setting within developer -> experimental features -> webgl via metal - if i disable this it fixes the issue

 

do we know if there is a way to set this as default when the site is ran?

[mvaneijgen]

No lag issues here on Safari Version 16.3 (18614.4.6.1.6) on a MacBook Pro 16-inch M2 Pro,  macOS Ventura 13.2.1

 

I don't know of a way to set flags on a browser based on a specific page. That seems not like how things would work. If you could create a minimal demo demonstrating the issue, I think you'll get a better answer, because someone can dive in the code and see maybe the culprit. Also what OS and browser version the issue is on would be great information.

[bultano]

Hi all,

 

To anyone that might have the same performance issues only on macbook, please see the below:

 

            <Canvas gl={{ antialias: false }} dpr={[1, 1.5]} flat antialias="false" >