Jump to content
Search Community

Problem with animations on iPad

ketz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I wrote some online chemistry games a couple years ago using GSAP for my animations.  When I first wrote it, I was able to run it on a computer (most browsers), an iPad, or an iPhone.  Now, it no longer works on my iPad, although it will work on a computer Safari.  I wonder if anyone knows of a quick fix or common problems for tablets or other mobile devices.

 

Problem:  I have cards that flip, and the wrong side of the card is shown and/or the words are backwards.  See:

http://ketzbook.com/chem/elementsymbols/elementsymbolmatch.html

 

Link to comment
Share on other sites

I didn't see any problems on my older iOS8 device (or desktop Safari).

It would really help if you could create an isolated demo using CodePen that only contains an example of the effect that is giving you  a problem with as little code as possible.

 

I noticed you are using quite and old version of GSAP (1.17), have you tried the latest version? 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>


 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks Carl!  Honestly, I don't know where the problem is, hence I don't know what to put on CodePen.  However, your suggestion sounds like a great place to start.  I  haven't updated my animation code in a couple years.  I'll try the latest version of GSAP and see if that works.

Link to comment
Share on other sites

The problem is "-webkit-backface-visibility: visible;" on what is (or will become) the back face of the card. Change those to

 

-webkit-backface-visibility: hidden;

 

As Carl said ... I would isolate a single card in CodePen to see its behavior and display there. And then just replicate your solution to the other cards.

 

I'm not entirely sure if that property value is being assigned through CSS, GSAP, or a custom script ... I just inspected it and changed the value to confirm that the property value does indeed fix the issue.

 

Where that change needs to happen is not clear as I didn't poke through the source.

  • Like 4
Link to comment
Share on other sites

Carl, updating to the newest version of GSAP fixed all of my problems!  You are the man; you saved me tons of time trying other things!

 

Shaun, I checked and all of the appropriate classes already had the code 

     "-webkit-backface-visibility: hidden;"

but thanks!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...