OSUblake

Easier Animations in Angular 1.3

Recommended Posts

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

  • Like 2

Share this post


Link to post
Share on other sites

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?

 

frRP74C.png

Share this post


Link to post
Share on other sites

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"
});
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

 

 

 

 

 

 

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

 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
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.