Jump to content
Nexal

animation doesn't work proprerty on Ipad and Iphone

Recommended Posts

 

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

Share this post


Link to post
Share on other sites

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

 

:)

  • Like 3

Share this post


Link to post
Share on other sites

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"). 
  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.