AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.
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.
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.