Jump to content

ketz

Members
  • Content Count

    15
  • Joined

  • Last visited

Community Reputation

5 Newbie

About ketz

  • Rank
    Member
  1. 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!
  2. 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.
  3. 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
  4. ketz

    GSAP on iPad

    Okay, two more questions: 1) Suppose I animate a simple div with only text and no special CSS effects. However, the parent or a sibling of the div has things like text-shadow, box-shadow, and gradient. What does your browser need to do? Does it still need to do the layout, paint, and composite operations? 2) How can we compare the browser performance of a translation for the following things: a) a box with text, background color, curved border, text-shadow, box-shadow, and gradient a box with only text, background color, and curved border c) an image with the same contents as (a)
  5. ketz

    GSAP on iPad

    So far: switched from top to y on problem translations switched title and #stage to images used tinypng on all png pics There is now a noticeable improvement. I can still see some lag at the beginning, but it is looking better. I'll try out the "clip" for my TV screen effect and replace the other translations with x, y. I might also change the button event listener, as it seems that the touch screen click lag may be effecting the animations too. Thanks for your help!
  6. ketz

    GSAP on iPad

    Thanks everyone, this has been a real learning experience. I didn't realize that text-shadow and the like used so much juice. I'll probably remove most of it. The only parts I really noticed the skipping were at the beginning and the end (i.e. when I translate the intro screen out and I use the TV screen effect to turn on the game screen). I only noticed this on my iPad (Safari), not on my desktop (Chrome, Firefox, IE 9 all ok). I see why box-shadow and text effects would slow things down for animated elements, but why would it matter for #backdrop? #backdrop doesn't change at all, and you are sure that it is responsible for massive repaints? If you're sure about that, I will probably replace the #backdrop effects with an image instead. Images should should be easier on the processor, right? I guess I just got a little too carried away with CSS effects
  7. ketz

    GSAP on iPad

    Changing from top to y on my problem animations did not seem to help. I am going to give clip a try; if I had known about it, I would have used clip to start with...that would have been a lot easier that changing height and top simultaneously. I may also need to look into other parts of my code like streamlining my eventlisters. A lot is going on at the beginning and end, and that may just be too much for the weaker iPad CPU.
  8. ketz

    GSAP on iPad

    okay, that makes sense. I checked again, the skipping only happens when there are multiple translations using left and top and size changes (height and width). Is it okay to animate height and width, or is there something better to use for that?
  9. ketz

    GSAP on iPad

    What if I use force3D:true for my problem animations instead of switching to x and y. Would that accomplish the same thing?
  10. ketz

    GSAP on iPad

    Thanks for your help! I think I will try the other options before I try lagSmothing. I'll look into the progress() method you mentioned above, as I am unfamiliar with that. It looks like changing over to x and y will take a bit of adjusting more than just a simple switch, so it might be a while before I have the result. Back to my day job...
  11. ketz

    GSAP on iPad

    thanks! I'll try the lagSmoothing out. Yes, I'm using setInterval for the timer, so lagSmoothing shouldn't affect it, right? I didn't know that x and y work faster than top and left. Can I simply substitute x for left and y for top, or do I need to adjust the values too? I think the lag/skipping was the worst at the beginning and especially at the end when changing screens. Fade didn't cause problems, but when I was changing multiple things (i.e. the size and position of one thing and the position of another at the same time) something skipped.
  12. ketz

    GSAP on iPad

    I made an interactive learning site that relies entirely on GSAP (HTML 5) for its animations. Generally, all the animations are quite smooth on Chrome or Firefox, but when I try it on my iPad, they skip sometimes. It doesn't look bad on the iPad, but it skips and misses parts of some animations. I know this is a more general question, but is this poorer performance on the iPad normal, or is there anything I can do? (FYI, I am a science teacher. I am band new to coding. I just recently taught myself JS and CSS.) Thanks! BTW, the site is temporarily at: http://ketzbook.com/chem/elementsymbols/elementsymbolmatch.html
  13. I am trying to use card flipping as part of an animation, and I am following the cool-looking example in the GSAP codepen. However, I noticed that it does not work on IE 10. On IE 10, the cards do flip, but instead of seeing the "back" card you see the backface of the front card. It appears as though there is a problem with the backface-visibility in IE 10. What can I do to make this also work in IE 10? Thanks! http://codepen.io/GreenSock/pen/yzahJ