The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

3d Animations with Greensock TweenLite

3d Animations with Greensock TweenLite

6:52
AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.
Watch this lesson now
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.

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