Jump to content


Angular Js GSAP Integration

Moderator Tag

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

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


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?

Link to comment
Share on other sites

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.


  • Like 4
Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

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...

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