Jump to content
Search Community

No rotation on Android 2.3.6 when bezier autorotate:true

Brickyenne 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

Hello,

 

I've two Android/iOS Apps with rotation. On 1st App this works no problem on Android 2.3.6:

 

var tl = new TimelineMax();
    tl.to(document.getElementById(firstCardToTween), 0.4,{rotation:"-45deg", ease:Power2.easeOut})...
 
However on 2nd App a bezier is being applied first with autorotate set to true and subsequent rotations aren't working (on Android), even when using the same syntax as in 1st App.
 
Any ideas on how to solve this?
 
Thank you, your help will be appreciated.
Link to comment
Share on other sites

Hi,

 

Sorry to hear you are having trouble.

 

Please provide a very basic (yet complete) example of the code that isn't working. It is much better for you to give us code that shows exactly what the problem is than for us to create a file and hope to replicate the same issue. 

 

Also, we may not have that exact version of Android but hopefully your code reveals an issue that we can address.

 

Thanks for you help and patience.

Link to comment
Share on other sites

All right. Here it is:

 

// Card not following curvature. It's a circle.

 

TweenMax.to("#card1", 1.8,{bezier:{
         values:[{left:10,  top:10},
                 {left:60,  top:10},
                 {left:130, top:10},
                 {left:200, top:10},    // Circle starts here
                 {left:244, top:21},
                 {left:270, top:42},    
                 {left:277, top:51},
                 {left:293, top:94},    // Max right
                 {left:283, top:127},
                 {left:270, top:146},
                 {left:244, top:167},
                 {left:200, top:181},   // Bottom max
                 {left:156, top:167},
                 {left:130, top:146},
                 {left:117, top:127},
                 {left:109, top:106},   // Left max
                 {left:117, top:61},
                 {left:130, top:42},
                 {left:146, top:27},
                 {left:177, top:13},
                 {left:189, top:10},
                 {left:200, top:10}], autoRotate:true}}); // Top Max
 
// Here card is moved to certain position while being rotated back to initial angle before entering
circle
 
       case 1:
            TweenMax.to("#card1",0.5,{top:"10px", left:"10px", rotation:0, ease:Power2.easeOut});
            takenCards[counter] = identifier;
            console.log(counter);
            counter++;
        break;
 
// Card is being moved again to new location
 
TweenMax.to(document.getElementById(cardToTween), 1,{top:"60px", left:"200px", transformOrigin:"50% 100%", ease:Power2.easeOut});
 
// Here card(s) is being rotated in new location

 

 var tl = new TimelineMax();
    tl.to(document.getElementById(firstCardToTween), 0.4,{rotation:"-45deg", ease:Power2.easeOut})
    .to(document.getElementById(secondCardToTween), 0.4,{rotation:"-23deg", ease:Power2.easeOut})
    .to(document.getElementById(thirdCardToTween), 0.4,{rotation:"5deg", ease:Power2.easeOut})
    .to(document.getElementById(fourthCardToTween), 0.4,{rotation:"35deg", ease:Power2.easeOut, onComplete:addEvent});
Link to comment
Share on other sites

Hi, thanks for the code. I guess I wasn't clear about the "simple yet complete" part.

This article here explains the need for creating reduced test cases and some great tips:

http://css-tricks.com/reduced-test-cases/

 

The code you provided seems to be just a few partial snippets. For instance that case statement floating in the middle references arrays and variables that have no meaning or context.

 

Your reduced test case should only contain the HTML, CSS, and JS necessary to replicate the issue of a single object being tweened by a bezier tween failing to be rotated by another tween. I'm guessing 5 - 10 lines of JS max and very little HTML and CSS. 

 

You can zip your files and attach them to this post.

 

Thanks.

 

-c

  • Like 1
Link to comment
Share on other sites

Mmmm...it's quite large and complex, animations, event binding and unbinding, dynamic css-property modification, it would require building a sample ( this means opening another pandora's box and deal with a new animal, debug it, make it work, etc, etc) that will consume dev time...what if .zip the whole thing and email it to you?

 

Code is commented and although somewhat complex my coding style is easy to follow.

 

What do you say?

 

Thank you!

Link to comment
Share on other sites

Sorry, we don't have the resources to fully debug and isolate problems in your production code. We are here to help you get the most of out the GSAP tools, but can only do that effectively if you make some effort to clearly present the issue you are experiencing. 

 

The first step in debugging any issue is isolating it. Once you create a simple file that  has a rotation tween after a Bezier tween with autoRotate set to true you will definitively know 1 of 2 things

 

  1. Your assumption is correct and there is a problem with these types of tweens running together or in sequence.
  2. There is no problem with these tweens and the problem lies somewhere else in your code.

 

If case 1 then we are at a point where it will be much easier for us to offer a solution. 

 

If case 2 then you will have a great idea where the problem isn't and our time can be more effectively applied to helping you either find the issue or fixing it once it is found. 

 

Let us know what you come up with and we can take it from there. 

 

Also, is Android 2.3.6 the only OS that has a problem? Are there versions of Android that do work?

Link to comment
Share on other sites

Carl,

 

Well, I'll definitely mock up a test file. I'll try to find the time today. Tomorrow is deadline to finish this App.

 

Android 2.3.6 and 2.3.7 are showing problems. It works on 4.1.1

 

Did notice the difference between App 1 (where rotation works on 2.3.x) and App 2 (where rotation isn't working on 2.3.x) is the syntax and the bezier being applied before the tweening on App 2.

 

+App 1:

 

TweenMax.to(element, duration, {top:"", left:"", rotation:...

 

+App 2:

 

TweenMax.to(element, 1.8, {bezier:{values:[.....], autorotate:true}});

 

TweenMax.to(element, duration, {css:{top:"", left:"", rotation...

 

 

However, removed css from syntax and no luck, still no rotation which makes me think the main difference is the bezier. I'll build a test in this way, then remove the bezier and see the results.

 

Thank you!

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...