Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jstafford

Trying to hook into AngularJS ng-show with Greensock Animation

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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