MotionPath mobile performance issue

[valentin_py]

Hi guys,

 

I created a curved slider using motionPath and GSAP. It works great, but I got some performance issues on mobile. I mean... The page freezes when I'm scrolling around. I checked the performance tab on my devtools and it shows that the curve slider is using so much resources. 

 

I tried everything and of course when I disable the curve on mobile, it works great. Can you tell me if I'm doing something wrong here? 

 

It's really a minimal demo, on my page, the curve is combined with some reveal animations.

 

Thanks so much for your help and this amazing lib ;)

See the Pen rNmRjEW by valentinpyx (@valentinpyx) on CodePen

[OSUblake]

Welcome to forums @valentin_py

 

You can try adding will-change: transform; in your CSS to elements you are animating.

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 

You might also try toning down some of the effects, like try removing the filter and background blend. Mobile devices sometimes can't handle a lot of stuff like that.

 

Also, is it necessary to have a ScrollTrigger and motion path for each? I would try to simply that by just rotating a container with the cards.

 

Here's an old post, but you can see how to position cards around a circle.

 

 

[valentin_py]

Thank you for your answer. Rotating the container doesn't exactly provide the effect I want

 

As for ScrollTrigger, it's on the timeline so it's here once, correct ? Tried to delete the background blend and filter but still no luck. Maybe it's the combination of multiple scrolltriggers that make the page freeze. I'll try to investigate and post the solution here if I find it

 

Thanks again !

[OSUblake]

1 hour ago, valentin_py said:

Rotating the container doesn't exactly provide the effect I want

 

I'd imagine you can get pretty close to it by playing with the transformOrigin and rotation values here.

 

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

 

1 hour ago, valentin_py said:

As for ScrollTrigger, it's on the timeline so it's here once, correct ?

 

Correct. Have you tried removing your resize listener? Sometimes mobile will trigger a resize when the nav bar goes up and down, and ScrollTrigger does a refresh for you if you add invalidateOnRefresh: true to your ScrollTrigger and use functions to return property values.