Jump to content
Search Community

Android Rotation Not Working

Joe Hakooz 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'll spare the kudos for now, but seriously, you guys rock!

 

I think there is an issue/bug with Android and rotation. But there is an exception which is baffling me...

TweenMax.min.js version: beta 1.33 (also tried 1.29)

Motorola Atrix - Android 2.3.6

Droid 2 - Not sure what version Android

 

You can view the issue using examples in the Greensock JS zip file...

greensock-v12-js/examples/falling_text.html - The letters do not rotate on Android (two devices)

greensock-v12-js/examples/super_basic_syntax.html - Near the end, the divs should rotate. Doesn't work on Android.

 

I even set up a bare bones example and it didn't work.

 

However, The Snorkl.tv Peacock example does work. I tried copying his code and TweenMax (1.29) but it doesn't work for me. It only works on his site???

 

Really strange but thought you should know. Let me know if I can help troubleshoot this any further.

Thanks!

Link to comment
Share on other sites

Weird - I just tested on 2 Android devices and the rotation seems to work fine. Can anyone else reproduce this issue?

Can you provide details on EXACTLY what I need to do in order to see this problem (and on which devices)? Nobody else had reported any issues like this (at least that I recall).

[scratching head]

Link to comment
Share on other sites

Here is my super simple example. The three shapes should rotate 360 degrees and move down a bit...

http://kab.zoodigan.com/bigbanner/default2.html

 

If that works for you, I'll chalk it up to bad luck. Our two Android devices aren't rendering rotation at all. Everything else works fine though. Crazy right?

 

But to answer your question. Here is how I viewed your example files which also do not rotate.

  1. I unzipped the Greensock JS zip to my server (IIS7). The example code is unchanged
  2. http://kab.zoodigan.com/greensock-v12-js/examples/falling_text.html
  3. Everything works except rotation on my Atrix (original) and Droid 2.

As previously mentioned, I would totally accept that my phones are the issue, but Carl's Peacock example DOES work on my phone.

 

Totally stumped on this one!

Thanks again

Link to comment
Share on other sites

Jack, or anyone else with an Android device. Can you please confirm if rotation works on this simple test page...? (Three shapes should spin 360 degrees and move down)

http://kab.zoodigan.com/bigbanner/default2.html

 

They do not rotate for me on Android. I've now tried a third Android device with the same results.

I suspect it must be my deployment that is having issues???

 

Question

I'm using TweenMax v1.33 so the CSS plugin should automatically be included, right?

Regardless, I have included the plugins and easing folders. Here is my folder structure for the above page.

 

/bigbanner/default2.html

/bigbanner/js/TweenMax.min.js

/bigbanner/js/plugins/*

/bigbanner/js/easing/*

 

I only include jQuery and TweenMax in my page.

 

I'm losing my mind here so any fresh eyes would be greatly appreciated.

Thanks again

Link to comment
Share on other sites

very strange.

i unfortunately do not have an android phone, so I can't verify your results.

 

In the peacock file I am rotating divs and not images. I also am using the the transformOrigin property.

I can't imagine why that would make a difference.

 

Just for kicks, here are 2 more demos that use rotation and shortRotation:

 

shortRotation:

http://www.snorkl.tv/dev/shortRotation/

 

bunnies:

http://snorkl.tv/dev/jack/jsv12/bunnies.html

 

 

Do they work on your Droid2?

Link to comment
Share on other sites

Thanks Dave1 and Carl, and of course Jack for staying on top of this!

 

In case this helps you troubleshoot, here are my specs and extra info...

Out of all the links shared above, including Carl's last two (bunnies and clock), the only one where rotation works on my Atrix is Peacock

 

Phone Specs

Model number: MB860

System version: 4.5.141.MB860.ATT.en.US

Android version: 2.3.6

Baseband version: N_01.77.37P

Webtop version: WT-1.2.0-110_OLY-6

Kernel version: 2.6.32.9

Build number: 4.5.141

Link to comment
Share on other sites

The latest version of CSSPlugin has a workaround that should resolve this issue (it's a bug in very particular versions of the Android browser, not a bug in CSSPlugin as far as I can tell). Please download the latest version and let me know how things go for you.

Link to comment
Share on other sites

  • 7 months later...

Hi,

 

I've found that rotation also doesn't work on a Samsung Galaxy S2 stock browser. I tried the sample at http://www.snorkl.tv/dev/shortRotation/ as well and it doesn't rotate at all.

 

Even a straight CSS rotate transform does not work on this version but the peacock however does work?? This may be the same issue as Joe had.

 

Phone Specs

Model Number: GT-I9100

Android Version: 2.3.3

Baseband Version: I9100XXKE7

Kernel Version: 2.6.35.7-I9100XWKF3-CL276555 root@DELL101 #2

Build Number: GINGERBREAD.XWKF3

 

The device has also been factory reset.

Link to comment
Share on other sites

the short-rotation example uses a VERY old version of TweenMax/CSSPlugin/ShortRotation. It isn't a reliable test-case. I'll see if I can update the files later. For now, feel free to save the source and test with updated TweenMax.min.js

 

-c

Link to comment
Share on other sites

The short rotation demo does work on this S2 now after your update. Rotation is still not working though in my app on that phone although some of the other tweens are. As I said before, not even a regular CSS transform rotate is doing anything so something has gone awry :(

 

This is a rather complex screen which I will try to reproduce stand-alone as not to give away any IP. I fear I just might be hitting limitations on the device/browser preventing some things from actually animating  Let me get onto that and send you a sample as soon as I can.

Link to comment
Share on other sites

Just reporting back. The failure in my project has nothing to do with GS, the tweens are getting applied properly but the browser will not render any of the 'transform' styles. Things like rotation for example just don't get applied.

 

So far all I can assume is that it's a level of DOM complexity that is preventing the browser from rendering. The following cases are breaking things in case you guys are interested:

  1. Anything off screen with overflow: hidden fails to render the transform.
  2. Anything significantly deep in the DOM element tree also fails to render the transform, busy setting up a basic page to test the actual depth at which it fails.
  3. translate3d needs to be applied at the parent for some animations to play on this device, this could be a combination of hectic CSS and crazy HTML.

Reducing the code to just the screen which contains the tweens (no multi-pages to swipe to, no deep nesting inside parent containers, minimal CSS for layout) makes everything works very, very well.

 

Thanks for the help even though it was just removing any doubt that GS was at fault here, seems to be this dodgy old Android browser and it's quirks.

  • Like 1
Link to comment
Share on other sites

Hey BrutalDev,

 

Thanks for so diligently reporting back here with your findings and clearing any concern about GSAP having bugs.

 

We'd be interested to see some test cases where the rotation breaks. If its not something that's possible for CSSPlugin to work around, its helpful for us to be informed of the browser issues.

 

Thanks again.

 

 

Carl

Link to comment
Share on other sites

Hi guys,

 

I've finally figured it out. The inline transforms do not work on Android 2.x if there is an element with translate3d above any elements you want to tween.

 

Here is the basic example of what I'm talking about: http://jsfiddle.net/kBVEd/

 

That fiddle will not rotate the DIV on Android 2.x (stock browser) but it will change the color. If you remove the translate3d from the CSS or even remove the DIV element which uses the class then everything works perfectly.

 

I can't explain why an unrelated element with transform3d applied to it will affect the CSS transforms on other elements on the page. I'm not even sure if there is any way GS could get around it either as it's just the browser acting strange...

 

Here is the code for the full page that you can test with:

<html>

<head>
  <title>TRANSLATE 3D ANDROID 2.X BUGS</title>
  <style>    
    .TheClassThatBreaksItAll {
      /* REMOVE THE TRANSFORMS AND THE ROTATION WILL WORK */
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }    
  </style>
</head>

<body>
  <div id="main">  
    <div class="TheClassThatBreaksItAll"></div>    
    <div id="RotateBlock" style="width: 200px; height: 200px; background-color: green;"></div>    
  </div>
  
  <script src="TweenMax.min.js"></script>  
  <script>        
    TweenMax.to('#RotateBlock', 5, { backgroundColor: 'red', rotation: '230deg' });    
  </script>
</body>
</html>
  • 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...