Easier Animations in Angular 1.3

[OSUblake]

Creating dynamic animations in Angular 1.3 has dramatically improved. You no longer need to inject a service or access your scope to get values for your animation. All animation methods now have an options parameter where you can pass in values to your animation modules.  There is also a new inline animate method where you can pass in from and to values and no longer have to deal with toggling a CSS class name.

 

 

// In a directive
link: function(scope, element, attrs) {      
  scope.moveToMouse = function($event) {        
    var from = { autoAlpha: 0, x: 0, y: 0 };
    var to =   { autoAlpha: 1, x: $event.pageX, y: $event.pageX };     
    $animate.animate(element, from, to);
}

// In your animation module
animate: function(element, className, from, to, done) {
  TweenMax.fromTo(element, 0.5, from, to);
  done();
}

 

 

Here's a simple demo of that code in use

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

 

And a more involved demo showing how to flip a card in the direction of the mouse and creating random bezier curves

Demo: http://embed.plnkr.co/CIiLR4/preview

Code: http://plnkr.co/edit/CIiLR4

[Carl]

Hey Blake,

 

Love that you are posting these tips and demos here. Great stuff.

 

Curious, is this demo supposed to end up in this jumbled state?

 

[OSUblake]

Thanks. Those demos are trending pretty well on Plunker so hopefully it will bring in some new people.
 
Yeah. They're randomly rotated 180 degrees. It's sort of like a game where you have to flip the tiles in the right order to get the picture to display right. I didn't provide any notification once you got it right because some of tiles can be all black, and you really can't tell if you have it rotated correctly. 
 
All the logic to flip the tiles is in the tile.js file, and is pretty straightforward even if you don't know Angular. You can test it out in an unjumbled state by commenting out line 47.
 

TweenMax.set(back, {
 //rotation  : _.sample([0, 180]),
 rotationY : -180,
 backgroundPosition: -scope.x + "px " + -scope.y + "px"
});

[Matt@storyarc]

I've been able to create many great timeline animations with Greensock. THANKS! Now I'm integrating with an AngularJS app. I built off your plunkr  and created the following very simple timeline. It works but it throws JS errors (Cannot tween a null target). Any help you can give to prevent throwing this error is appreciated.

Here's my attempt:

 

http://plnkr.co/edit/3j1EtN?p=preview

[OSUblake]

Oh, I haven't used Angular 1 in a long time.

 

The problem is that you are creating all the animations inside a directive, which reference other directives, which might not be ready. So you're basically creating 3 timelines with 3 animations each, for a total of 9 animations. That of course isn't correct. A parent element should do that if you're trying to create a timeline, but only when all the child elements are ready.

 

For this it would be better to use latest version of Angular 1, and use components instead of directives.

https://docs.angularjs.org/guide/component

 

So you should create a parent component for the voices components, and then inside the $postLink hook of the parent component, create the timeline and animations. I don't have any demos that do something like that, but here are a couple of demos that use components.

 

See the Pen eJBaga by osublake (@osublake) on CodePen

 

 

 

 

See the Pen 4ac02b62146b6cbc6a2e236c41effbbf by osublake (@osublake) on CodePen

 

 

And here are a couple good articles on using components and hooks.

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://toddmotto.com/angular-1-5-lifecycle-hooks