[Vote on new feature for staggered animations]

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.

[Tweening properties using calc()]

I have a similar issue.

Consider the 

See the Pen xbYxrX by ThomasBurleson (@ThomasBurleson) on CodePen

 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. 

[Using Greensock to create Durandal transition]

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:

 

See the Pen jEyjrd?editors=101 by ThomasBurleson (@ThomasBurleson) on CodePen

 

 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. 

 

The AngularJS purist will protest that I am doing a DOM element lookup in the controller... but that could be easily resolved with another directive that would register the element instance by name.

 

[Using Greensock to create Durandal transition]

@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... });