animation doesn't work proprerty on Ipad and Iphone

[Nexal]

 

hi, I'm having problems with gsap animation on ios (phone, tablet) when I have a certain number of animations on the same page. to fix the problem I added to the elements that caused the problem 'will-change: transform;' and now it works, but if you look on codepen you will see that the quality of the element is lost and becomes very large. how can i solve?

 

 

on codepen I have inserted only the code necessary to visualize the animation that creates problems.

See the Pen Oeqzyo by damiano31 (@damiano31) on CodePen

[Jonathan]

Hello @Nexal and Welcome to the GreenSock Forum!

 

When you say:

 

1 hour ago, Nexal said:

I have a certain number of animations on the same page

 

Do you mean the CSS animations that are on your page in the HTML panel. I see a style attribute with a ton of CSS animations. Its always best not to animate elements with GSAP if their children or parent elements have any CSS animations or CSS transitions on them. Otherwise you will have rendering issues due to the fighting of the two.

 

Also what elements (id or class) are you referring to, you have a lot going on in that example?

 

I am also seeing an error get thrown in the console. I notice terzafrase is an id selector not a class selector like you have in your code.

 

invalid morphSVG tween value: .terzafrase

 

[GreenSock]

A few quick comments:

1. Be careful about will-change. https://greensock.com/will-change
2. The invalid morphSVG tween error means you forgot to load MorphSVGPlugin
3. You can try setting CSSPlugin.defaultForce3D to true or false to see if one of those helps (default is "auto").