Results 1 to 4 of 4

Thread: Major Problems With Animations on Android Phones

  1. #1

    Default Major Problems With Animations on Android Phones

    It seems that there are major issues with animations on Android Phones,
    where objects are out of alignment, especially when objects have scaling
    or rotation animation. My default animation preview browser is Safari,
    on a mac, and animations are finished looking correct in Safari. But when
    viewed in a browser or within an app on an Android phone there are objects
    that are not the right size, not in the right position, etc.

    Are there issues with animations displaying the same on Android phones as on
    iphones, and is there a work-around to this? Is there an imminent Sencha Animator
    update that fixes this? I would hate to have to be limited in the kinds of animations
    I can do, such as not having objects rotate, in order to create animations that play the
    same on Android as on an iphone.

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010


    Unfortunately, the Android browser is very buggy. ICS seems to be a lot better, and we expect it to get even better with Chrome.

    This is an Android issue, and does not affect iPhones.

    Some generic strategies to work around some of the Android bugs/limitations.
    1) Make sure there is a keyframe at 0 seconds for every animation.
    2) Don't apply translation (position) and rotation to the same objects keyframes. Rather, put the object inside another object and apply position and rotation separately on each objects keyframes. (same issue might happen with any of the transforms, so try this approach if you have issues when they are combined on the same keyframes/objects).

  3. #3

    Default Android doesn't show rotation

    I believe rotation will not show up in the default browser on Android phones, no matter what.

    Meanwhile, I'm encountering Android scaling issues. It seems even if I just scale an object and leave it in the same position, it still won't show show the scaling on Android. But as far as I see, this ISN'T an issue w/ the Android browser. Are there more tips you can share?



  4. #4
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010


    Unfortunately they are bugs in the Android browsers as well. Looks like currently, both rotate and scaling runs into Android bugs. Looks like it work okay in 2.1 but is broken in 2.2 and 2.3.

    I have seen some workarounds, but they do not seem to always work, and they typically requires to edit the exported code.

    So one way to potentially workaround the rotation bug is to make sure the object has 0,0 position (but you can nest it in an object with a set position) and set a rotation. Then in the exported code you'll find css code for the object looking like this:
    translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg);
    and you can replace it with

    You might be able to do the same for scaling, replacing
    translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 1);
    scale(0.5, 0.5);

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts