Share Posted November 3, 2014 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 2 Link to comment Share on other sites More sharing options...
Share Posted November 3, 2014 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 More sharing options...
Author Share Posted November 3, 2014 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" }); 1 Link to comment Share on other sites More sharing options...
Share Posted January 20, 2018 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 Link to comment Share on other sites More sharing options...
Author Share Posted January 20, 2018 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 2 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now