Angular Js GSAP Integration

[hareeshch]

How to integrate Angular property (.ng-hide-add and ng-hide-remove) in GSAP?

Scenario:

I have a div say "demo", I have four different partials which will append to "demo" by clicking four different tab. I need to animate "demo". So each time i click a tab partials gets appended to "demo" div. I need to use GSAP for ".demo.ng-hide-add" and ".demo.ng-hide-remove". How can i achieve this in GSAP?

[OSUblake]

Hi Hareeshch,

 

You can use the ng-animate module to trigger animations when the class "ng-hide" is added or removed from your element. Depending on how to plan to animate your partials, you might need to position them absolute so that they are not stacked on top of each other when transitioning. You can read about that in this thread.

 

This demo should help you out.

http://plnkr.co/edit/7E7HKQ?p=preview

[hareeshch]

The demo link shows "loading "  message only

http://plnkr.co/edit/7E7HKQ?p=preview

[violacase]

For me http://plnkr.co/edit/7E7HKQ?p=preview works. And I learned a lot. Thanks (again!) OSUblake. 

One thing OSUblake: Googling I can't find any recent stuff on this subject from Angulars' perspective. Are you the only one on the entire www concerned with this stuff? If not, could you give me some useful links? I'm soooo eager to learn you see.

[OSUblake]

I think the site was down when he posted that message.

 

Hate to say it, but your Google search is correct. There is absolutely no information available about doing JavaScript based animation in Angular, which I don't get, because Angular is perfect for JS animations. Not only that, but I know that some members of the Angular team are huge fans of GSAP and have done some pretty cool things with it.

 

Here's to hoping that one of these days the rest of the Angular community will figure out that creating CSS classes with names like .view-animation.ng-enter.ng-enter-active is a stupid way to do animations. I did, and that's reason I started using GSAP.

 

[violacase]

Thanks for your clear reply, OSUblake. I'm trying to build a 'one-page ajaxified' website with WordPress as the backend. Because the front end needs a lot of real time changeable data I decided to use Angular for the data binding.  And, of course, GSAP for the UI-manipulation. I really can't understand why not LOTS of developers make that same decision. Perhaps they do but don't experience any problems doing so...

[Christian]

Check out 

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html 

http://www.yearofmoo.com/2013/12/staggering-animations-in-angularjs.html

 

If you havent already