Jump to content


Easier Animations in Angular 1.3

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

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);


Here's a simple demo of that code in use



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
Link to comment
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?



Link to comment
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
Link to comment
Share on other sites

  • 3 years later...

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:



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



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.





  • Like 2
  • Thanks 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.