Jump to content
Search Community

Using Greensock to create Durandal transition

cerulean test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Has anyone created a Durandal transition using Greensock?  

 

They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world.

 

For one thing, the transition module must return a promise.  I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen.

 

If anyone has any example code that would be most helpful — or some pointers.

 

Thanks!

Link to comment
Share on other sites

Thanks, I figured.  I am just dipping my toe into Durandal myself, to see what's there.

 

However it might be something the Greensock team would want to exokire at some point, as apparently Durandal is going to be merged with Angular for Angular 2.0.  Angular is popular and getting the Greensock platform to work easily with it for animation would be cool.

 

Could you give me any guidance on how I might "return a promise" that completes when the animation completes?  Is 'promise' a jQuery concept, or a general Javascript concept?  I know that somehow I'd tie it into the GSAP onComplete...

 

If it's too esoteric and framework-specific that's cool, never mind…

Link to comment
Share on other sites

Hi,

 

I've been playing with Angular JS for about week now (starting a project using angular and GSAP in a couple of weeks) and even with the learning curve being a little steep at the beginning (at least it was for me), once you dig into directives you'll see why there's so much fuzz about it. Is a very neat tool.

 

This article could help you a bit:

 

http://www.creativebloq.com/javascript/build-animated-angularjs-website-61411891

 

Also this blog has a lot of resources on Angular and they created a 3 part tut on building a fullscreen slider with angular and GSAP (thanks to the guys for adding this in the GreenSock twitter timeline):

 

http://onehungrymind.com/

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Angular plays very nicely with GSAP.  Unfortunately, there is not a lot of documentation on using JavaScript animations with Angular.  Most of the articles you find only detail how to do CSS animations.

 

Starting with Angular 1.3, each of the $animate service methods returns a promise, which can also be called to cancel the animation.

$animate.addClass(element, "my-class")
  .then(function() {
    // do something once the animation is complete
  });

Here's a Plunk demonstrating this.

 

http://plnkr.co/edit/mjIlvxHJhnl7sLQPqbnh?p=preview

 

 

If you want to chain animations, you could use $q to chain the promises together like this.

$q.when()
  .then(function() {

    var moveUp = $q.defer();
    $animate.addClass(element, "move-up").then(function() {
      moveUp.resolve();
    });
    scope.$apply();

    return moveUp.promise;
  })
  .then(function() {

    var moveDown = $q.defer();
    $animate.addClass(element, "move-down").then(function() {
      moveDown.resolve();
    });
    scope.$apply();

    return moveDown.promise;
  })
  .then(function() {
    // More promises...
  });                
  • Like 4
Link to comment
Share on other sites

  • 3 months later...

@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... });          
  • Like 2
Link to comment
Share on other sites

Hi Thomas
 
Welcome to the GreenSock forums! I guess my example with the nested promises might be hard for some to people to follow. Your example gets right to the point of showing how easy it is to chain promises together. Very nice!
 
Add in some ES6/TypeScript fat arrow functions, and it gets even cleaner.

$q.when()
  .then(() => $animate.addClass(element, "move-up"))
  .then(() => $animate.addClass(element, "move-down"))
  .then(() => // More promises...); 

I took my example and yours to create a little demo to show some animation promises being chained together, just like a GSAP timeline. Your code is used by the purple block. I also include some code to show how to broadcast/emit animation events across an application.
 
Plunker: http://plnkr.co/edit/6c0ggc?p=preview

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 4
Link to comment
Share on other sites

Thanks Thomas, that's awesome!

 

I've been using ngAnimate and CSS classes almost exclusively because that is how I was taught, but I've always hated the idea of having to toggle a class. I really like your revision, and that reduce function is very helpful. I never realized how promises can be leveraged to compose some complex animations.

 

I've been exploring different ways to choreograph animations in HTML, but those darn Angular purists have kind of forced me into a certain way of thinking, so I've been hesitant to implement something like your Animation DSL or Famo.us/Angular does. However, I think your gsTimeline is absolutely brilliant! I'm sold! Now I'm wondering if there is an easy way to use a gsTimeline to hook into enter/leave animations in order to create some complex hero transitions.

 

I also want to thank you for chiming in on the GSAP forums and making yourself known. I've been looking for some good Angular + GSAP animation examples, but they're hard to come by. I checked out your GitHub and CodePen, which has really forced me to rethink Angular animations. Plus I picked up some great tips about logging and supplanting strings.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...