Search the Community
Showing results for tags '3d transforms rotationy'.
Found 1 result
-
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); }
