GSAP pathDataToBezier - Performance problems on Ipad / Iphone

[FriesBureau]

Maybe someone can help me out.

 

I have performance problems loading an GSAP animation.

 

The animation is this:

 

Add SVG to div, and the SVG will follow a data path in SVG d: coordinates.

 

It works fine on desktop, and only sometimes on Ipad / Iphone.

 

The problem is that the SVG is moving very slowly, like the data path is still being loaded. I tracked the fps, which topped around 100 for Ipad.

 

How to experience the problem:

 

Click on the down arrow to go below water surface. Then click on the whale icon. The whale SVG should appear from left to right, and follow a data path for 20 seconds.

If the whale moves smoothly, then all is good. But if the whale is moving very slowly, and in staggering movements, then the error must be performance problems ?

See the Pen PvrdRq by friesbureau (@friesbureau) on CodePen

[GreenSock]

I didn't notice any performance problems, and there are over 5000 lines of code in that demo so it's a bit overwhelming to try to do a performance audit with so much complexity, but I'll make a few comments:

• You seem to have CSS transitions applied to almost everything. I definitely recommend against using CSS transitions/animations on the same elements that GSAP is animating. That can certainly cause conflicts and performance challenges.
• Be careful about animating pseudo elements like ::before and ::after because my understanding is that some browsers don't handle that well (performance-wise). This has nothing to do with GSAP. 
• SVG can be very CPU-intensive to render (again, this has nothing to do with GSAP), especially on retina displays (high-resolution). You might see better performance with canvas. 
• GSAP and the browser won't animate an inline SVG element that is only partially-loaded, so I don't think that has anything to do with the problem you're experiencing. 
• You mentioned 100fps. That's EXTREMELY high (good performance). Typical high performance is 60fps (in fact, most browsers can't do any more than 60fps). 

If you still need some help, please provide a more reduced test case. We just don't have the resources to offer free performance audits on complex demos like this. 

 

Happy tweening!