Jump to content
Search Community

Weird behavior with rotationY

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'm using TweenMax for animating some cards. In one of the animations I want to apply a 3D transform in order to flip a card and show the reverse side.

 

Well, when the card is rotating and hits the 90 ( at 12 o'clock ccw as seen from top) degree mark it disappears all the way up to the 270 degree mark (ccw at 6 o'clock) then appears again. That is, if want to rotate 180 degrees to show the card back, the card is invisible!

 

If the animation is repeated the weird behavior begins earlier, making this card invisible if touched!

 

For testing purposes, eliminated the 3D transform part of the animation and everything works as designed.

 

I'm sharing the javascript code where this is happening. This application is quite large so it isn't practical to share here the whole code to see the various events and animations added to the cards. In this portion of the code, if the line where the rotationY is commented out all works ok.

 

Isolated the image in an example to test and everything works ok. Clearly this has to do with the fact that several animations and events are acting on these images and something is in conflict.

 

Any ideas? Your help will be appreciated.

//------------------------------- Shows selected card -----------------------------------

function showCard(selectedAngel){
    counter2++;
    cardBeingRead(selectedAngel);
    TweenMax.set(selectedAngel, {transformPerspective:200, position:"absolute"});
    var angel = new TimelineMax();
    angel.to(document.getElementById(selectedAngel), 0.2, {rotation:0})
    .to(document.getElementById(selectedAngel), 1, {"left":"10%", "top":"100px"});
    //.to(document.getElementById(selectedAngel), 1, {transformOrigin:"50% 50%", scale:1.5, rotationY:180})
    setTimeout(function(){ showMessage(selectedAngel)}, 1000);
}
Link to comment
Share on other sites

Sometimes its the css or even the html that you are using that affects the final output.

The JavaScript alone doesn't give us a lot to work with, as it first glance all I can see is that it probably should work.

 

Are you setting backface-visibility to hidden somewhere in the css?

 

Here is a pretty basic example of a 3D card flip:

http://codepen.io/GreenSock/pen/yzahJ

 

In the js comments there are links to some other basic 3D demos. 

 

If you could create a reduced test case using codepen (you can just fork the example above)

to show one card flipping with your code it would really help us give you accurate assistance.

 

Thanks!

Link to comment
Share on other sites

Hi,

 

It's hard to see what could be the issue here with just that bit of code. My first guess would be a CSS issue, perhaps position or backface-visibility.

 

If you could provide a reduce sample of your code it would be very helpful in order to get a better idea of what could be causing this.

 

In the mean time take a look at this codepen:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

 

Hey I'm working here Carl!!!  :D

  • Like 2
Link to comment
Share on other sites

Thank you for the quick response guys!

 

Well, yeah I think it's the css, but no, no backface-visibility hidden anywhere. I'll build a test case as time allows since App is quite large and it implies re-writing a great portion of the app. Already built a very small test sample and it works, as is not representative of the actual scenario where the problem is happening.

 

Let me take a look at the code samples you provided and will come back to you with a reduced test case, ok?

 

Thank you!

Link to comment
Share on other sites

Rodrigo, nice work reading my mind;)

 

Brickeyenne, 

 

If you study any of the codepen's above, I would suggest Rodrigo's as the rotation will work in IE10.

 

My version, relies on the transformtyle: preserve-3D value which Microsoft failed to implement in IE10 (which allows child elements to preserve their position in 3D space when their parent gets rotated).

 

more info: http://msdn.microsoft.com/en-us/library/ie/hh673529(v=vs.85).aspx

 

Anyway, I'm sure once you boil your flip down to the bare essentials, one of us will be able to help you out.

 

-c

  • Like 1
Link to comment
Share on other sites

for iE10 you have to animate each of its child elements you want rotated.. since like Carl said they did not include transform-style:preserve-3d into the IE10 engine.

 

if you read under transform-style in Carl's MSDN link.. it reads:

 

 

Note  The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

 

they say to manually apply the parents elements transform to each of its child which is very tedious.. but that is why IE is my mortal enemy

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