Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

3d Animations with Greensock TweenLite

6:52 Angular 1.x lesson by

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.


egghead.io comment guidelines

Avatar
egghead.io

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

Avatar
Dave

Hi,

I've implemented this code for my project and noticed a problem. the animation works perfectly on a page load, but if you navigate away and then back, there are some weird css issues, with elements becoming misaligned and the card back showing when it shouldn't.

Any suggestions?

In reply to egghead.io
Avatar
Dave

ok, solved (for those who encounter the same problems. i needed to move the Tweenlite.set() calls to the directive itself so that there load on compile.

In reply to Dave
Avatar
John

so im trying to animate all of the child elements of an ng-repeat as a single timeline and im unsure of how to go about it.

if i put the animation on the ng-repeat the element.children length is always 0 since the ng-repeat shows up for each instance as its own isolated scope.

how can i go about doing this? I have 6 panels that are rendered from JSON in an ng-repeat and I want to do a 3d animation that transitions between all of them really quick in 3D and then I do a $state.go at the end and move to a route that shows a single one. The route change itself uses the same animation.

Avatar
Arnold

As much as I like the animation feature of Angular, to me it feels better to have all the Tween logic and events in the Directive. I had the same issue where I had to split the animation logic between the directive and app.animation. To me it seems messy. I'd rather have everything in the directive. Also using scope variables to update UI states doesn't feel right either. Why not just check if the element has a class and base your logic on that.

In reply to Dave
Avatar
Rodolfo

Is it possible to get the code for this lesson? The download link doesn't seem to be showing up for this one.

Thank you

Avatar
roberto

Code, por favor :)

Avatar
Troy

Is there any code to look at for this tutorial? As it hasn't posted on the website. Kind regards.

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

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.

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.

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.

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.

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.

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.

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 02:01] 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.

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.

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.

Using TweenLite is that we can set the property once, and TweenLite will handle the browser variations for us.

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.

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

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.

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.

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.

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

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

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

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.

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.

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.

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 0 when it's taken away.

This concludes this lesson. Stay tuned for more videos on this topic. I will catch you next time.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?