ThomasBurleson

This is a really nice feature. I vote for "cycle" as the property name; for the love of God, please do NOT use 'alt'. > Carl - I love your humour in the video; made me laugh 2x on a foggy Sunday morning. Thx.

I have a similar issue. Consider the CodePen Demo which has the following html gridlist using "calc( )" for its style-based positioning: <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px" class="ng-isolate-scope" role="list"> <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px); width: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile> <md-grid-tile cstyle="left: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 8px); width: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile> <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 3) + 12px); width: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile> <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 4) + 16px); width: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile> </md-grid-list> When the gridlist reflows to a new layout, I have a callback [registered with the gridlist layout engine] that will intercept the layout request. The interceptor is provided the desired style changes for each tile. Here is the attempted animation code using GSAP: function onAnimateGrid(grid, tiles){ var position = 0; var tl = new TimelineMax({paused:true}); tl.to( grid.element[0], 0.1, grid.style ); tiles.forEach(function(it) { tl.to( it.element[0], 0.350, it.style, position ); position += 0.3; }); } When I try to using GSAP to animate those, the duration values are totally ignored.

Blake, With Greensock, sometimes integration with ngAnimate simply complicates things. Often we want to run animations without assigning class styles; we want to animate in a clear fashion without trying to remember how a class change triggers [thru ngAnimate] animation callbacks to our custom TweenMax code. Here is revised implementation of the solution presented in your Plunkr: CodePen - AngularJS with TweenMax Chains created a $timeline animation service to hide all the details of sequences, using TweenMax, etc. In turn, the main `AnimationController` simply uses the injected $timeline service as follows: $timeline.start( target, function onStartCallback( action ){ $scope.progress[name][action] = "running..."; }, function onDoneCallback( action ){ $scope.progress[name][action] = "finished"; } ) This starts the animation sequence on any specified target. Of course, this implies that the animation [sequences] are fixed... but that was the assumption used in your previous application. This code leverages promise chaining heavily and uses callback-interceptors to resolve pending promises... And internally I use the nice trick of `[ ].reduce( )` to sequence 1..n promises in a sequential promise chain. It is also super easy to delay the start of any other animations. Thanks for you Plunk. It inspired me to create something cleaner without the use of ngAnimate and simultaneously keeping my directive logic clean 'n lean. I think ngAnimate is really great for animation of elements that are added or removed from the DOM... or even for animating via CSS elements whose animation is simple. For complex choreographies, I think GSAP-direct is the best solution.

@OSUBlake This is perhaps a more succinct version of your idea: $q.when() .then(function() { return $animate.addClass(element, "move-up"); }) .then(function() { return $animate.addClass(element, "move-down"); }) .then(function() { // More promises... });