Jump to content


  • Posts

  • Joined

  • Last visited


2 Newbie
  1. 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>
  2. 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: Anything off screen with overflow: hidden fails to render the transform. 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. 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.
  3. 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.
  4. 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: root@DELL101 #2 Build Number: GINGERBREAD.XWKF3 The device has also been factory reset.
  5. Long story short, clearProps is EXACTLY what I'm looking for! I am using 1.8.1 and just misunderstood what invalidate and clear was doing to the timeline and that's what caught me out all along. I also should have RTFM for CSSPlugin, I was spending too much time thinking it was something the TimelineMax or TweenMax modules should be doing. restart() was not working because I invalidate()/clear() in the middle of a tween and according to your explanation this will clear the starting values I would need to restart correctly and it continues from the values it detects in the style attribute. Totally understood. I am manually clearing specific attributes with jQuery and regular expressions with the same selectors that do the tweens so you can imagine how pleased the clearProps makes me. There is also a rotation in there so offloading the prefix detection will also be great. I can't test right now but based on the awesome information provided, the combination of kill() and clearProps should do the trick nicely. That set() in the code example is also going to be crucial since I only stop and clear when a user event occurs. I'll re-post my findings when I go refactor things tomorrow. Is there any way to automatically clearProps when stopping/clearing an infinitely looping timeline? On a separate note, the code example has a call to kill() which I don't recall seeing, then I noticed there is a link to "Show Inherited Public Methods", a whole new world has opened up...
  6. Hi, I have a basic timeline that tweens the opacity of list items in various ways. When certain things happen on screen I need to clear the timeline completely and also reset the elements back to their original starting values. 1st attempt: Just using restart() on the timeline expecting it to clear the existing inline "style" attribute. The timeline restarts nicely but it starts with the current inline values of the elements (eg: style="opacity: 0.89434") which ruins the animations because all the timings go off. 2nd attempt: Using invalidate() on the TimelineMax object to clear the existing values. This appears to have no effect, the inline styles are still in place after making the call. Calling restart() after an invalidate still has the same effect as attempt 1. 3rd attempt: Using clear() on the TimelineMax object and just re-adding all the TweenMax object to the timelines each time I want to play it. Clearing does indeed clear the tweens from the timeline, but does not reset the inline values so any subsequent tween will just start from the values it left off on. Because the inline styles pretty much have the highest specificity I can't override easily by applying any CSS, I'll have to resort to stripping inline styles (manually or with jQuery) when getting rid of the tweens unless there is something built in to restore the elements back to when there was no tweening applied to them? All the various 'kill' methods also don't get rid of the inline styles but at least it appears to reset when applying it again. Please help, there's gotta be something simple to solve this problem. Regards, Werner