Trying to hook into AngularJS ng-show with Greensock Animation

[jstafford 23 Likes (Newbie)]

Hello Greensock Community,

 

I am very new to working with Greensock and AngularJS. 

 

I have a basic modal working where I am using ui-router to transition the view inside a bootstrap modal using ui-view within the modal-body. I also have previous and next buttons that correctly appear and dissappear in the footer based on the page you are currently on inside the modal. These buttons also navigate you to the next or previous page in the modal.

 

What I would like to do is the following:

 

hook into ng-show so that when true, my buttons will fade in and when false they fade out

See the Pen by edit (@edit) on CodePen

[jstafford 23 Likes (Newbie)]

Any help appreciated. hooking into the ng-show is not behaving as expected based on several tutorials I have seen.

[Carl 9,066 Likes (Superhero)]

Sorry, we really don't do much with Angular. Our support is hyper-focused on the GSAP API. 

There are a few around here with some solid experience and they may chime in when they get the chance.

If you do a search for angular (up top) you will probably find some good info.

[Ihatetomatoes 147 Likes (Specialist)]

Hi @jstafford,

I have recently worked on an Angular project and hooked into some of their classes for fading in and out.

.item {
   transition: opacity 0.2s linear, visibility 0.2s linear; 
}
.item.ng-enter {
    opacity: 0;
    visibility: hidden;
}
.item.ng-enter.ng-enter-active {
    opacity: 1;
    visibility: visible;
}

.item.ng-leave {
    opacity: 1;
    visibility: visible;
}
.item.ng-leave.ng-leave-active {
    opacity: 0;
    visibility: hidden;
}

 

I wouldn't include GreenSock in your project if you only want to fade things in and out.

 

Hope that helps.

[jstafford 23 Likes (Newbie)]

Yeah, this will be the way I go. Thank you. I will save the big guns for later.

[OSUblake 9,990 Likes (Superhero)]

Creating animations with Angular is real easy, and is one of the reasons I sought out a JS based solution like GSAP. Just search around this site for Angular, and you will see a lot of solutions I've already posted. Here's an example of how to use ngShow/hide.

 

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

[jstafford 23 Likes (Newbie)]

thanks Blake. This is the example I was using. It is very nice!

[OSUblake 9,990 Likes (Superhero)]

Ok. Just remember that ngShow/ngHide animations are not triggered by enter/leave. It's not documented that well, but you need to add or remove the class "ng-hide" somehow to trigger those animations. It took me a while to figure out because the only mention of that is here under directive support.

https://docs.angularjs.org/api/ngAnimate

[OSUblake 9,990 Likes (Superhero)]

I got to your SO question too late, but check out this...

See the Pen VavZzp?editors=0010 by osublake (@osublake) on CodePen

 

Here's some tips about using Angular.

 

Angular is not jQuery. That's probably the hardest problem for beginners to overcome. Please check out these SO responses.

http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

 

To use jQuery with Angular, you need to load jQuery first. I like to put all my vendor scripts in the head (jQuery, Angular, GSAP, etc). This helps prevent uncompiled HTML from showing, along with ng-cloak. 

 

Angular 1.5 introduced components, which can be used in place of directives in most cases. Check out Todd Motto's article about how to use them. Much easier!

https://toddmotto.com/exploring-the-angular-1-5-component-method/

 

Using ES6 classes makes working with components much easier. Classes are part of the language, so get used to them as this is how a lot of new frameworks are being setup as a class/component model. Also, when you use classes, you don't need to use $scope everywhere.

 

And take advantage of Angular Material. It makes setting up your layouts real easy. It's doesn't get much easier than doing this.

<my-element layout="row" layout-align="center center"></my-element>