3d Animations with Greensock TweenLite

Lukas Ruebbelke: [00:00] Hello, this is Lukas Ruebbelke. In this screencast, I am going to show you how to create a 3D animation using AngularJS and GreenSock.

[00:08] In our sample application we have these question tiles that when you roll over, it shows the answer state of the question, and then when you roll out it goes back to the question. This would be good for like a quiz game or a memory game.

[00:27] This is what we're going to be animating over is that transition from when you have your question state to your answer state and then back.

[00:37] Let's jump into the code and see what we're working with. We have a main controller with a questions array with questions objects that has a question and answer property.

[00:47] I've created a question directive that has a show answer property on scope. This is what we're going to be using to toggle between the answer and question state, and then I have started an animation that is going to look for the addition of the answer class.

[01:09] When answer class is added, it's going to perform one animation, and then when it's removed, it's going to perform another. This is called answer animation.

[01:20] In the html we are toggling on the show answer property on mouse enter and mouse leave, so when your mouse enters it says show answer to true, and when mouse leaves it sets it to false. Then we are showing the question and answer state depending on the property or the value of show answer. If it's true, then it will show the answer. If it's false, it will go back to the question state.

[01:46] Let's go ahead and remove this, because we are going to be animating over this and not toggling it. Let's add in our answer animation and our [inaudible] class statement so that we can toggle on this style being added or remove, or this class rather, the answer class, and we'll just use show answer to set the state of this.

[02:18] When show answer is true the answer class is applied and when it's false, the answer class is removed. It's this event that we're able to hook in our animations. That's with just about anything within the browser. There are browser variations.

[02:35] We're going to set a few properties within our AngularJS animation to initialize or to properly set up the animation that we want to perform.

[02:46] Using TweenLite is that we can set the property once, and TweenLite will handle the browser variations for us.

[02:54] Within the animation, I'm just going to paste a few initialization method calls here using TweenLite set. In order for an element to have true 3D visual perspective, we have to set perspective on the parent element. In this case, it's card wrapper. This number is usually between 200 and 1,000. The lower in number, the more drastic the perspective.

[03:17] We're going to set this to 800, and then on the card element, we're going to set transform style to preserve 3D.

[03:26] What this does is it causes the child elements to preserve their 3D position. Then, on the back of the card, we're setting rotation Y to -183. I'm just going to initialize it so it's all ready rotated 180 degrees. Then we're setting the back and front to have a back face visibility of hidden. In other words, when it's no longer facing the view port we're just going to go ahead and hide it.

[03:53] Now that we've set those properties, it's simply a matter of just calling TweenLite twice on the inner animation and the outer animation.

[04:04] We're going to TweenLite to...We added the animation to the card wrapper, so we are going to...we want to animate on the card. We'll go ahead and just pull that element down. We're going to set a duration to 1.2. Let's create our animation object and we are going to set rotation Y to 180. We are going to use the back ease out property to handle the easing. We need to make sure to call the done method when on complete is fired.

[04:51] That was pretty straightforward. We're simply saying, "We want to perform this animation on the card element. We want it to be 1.2 seconds. We're going to set rotation Y to 180 degrees. We're using the back ease out easing method and we're calling done on complete."

[05:11] This is almost the same method call, but we're going to be setting this back to zero when the class is removed.

[05:22] Let's see this in action. Reverse the page, and when you roll over it, you get this cool flippy animation.

[05:29] Let's review what we have done. We are toggling on the answer class when show answer is true or false. We've added the answer animation to our question element which is the card wrapper. Inside you have the card and then you have the front and the back.

[05:56] From here, we are setting the card wrapper to have a perspective of 800. So on the parent element it forces everything underneath it to have true 3D perspective.

[06:06] We set transform cell on the card itself to preserve 3D so that it's children elements will preserve its 3D position. We initialize the back of the card to have a rotation of -180, so we basically flipped it, and the back and the front have a back face visibility of hidden.

[06:24] From here we're simply calling TweenLite just like a normal method call, and we're animating over the card element. We're setting a duration of 1.2. From here we are just rotating 180 when the class is applied, and we're animating back to 0when it's taken away.

[06:45] This concludes this lesson. Stay tuned for more videos on this topic. I will catch you next time.