Jump to content
Search Community

Trying to hook into AngularJS ng-show with Greensock Animation

jstafford
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

Posted

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.

Posted

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

Posted

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
Posted

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
Posted

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

Posted

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
Posted

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

Posted

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
Posted

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

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.
×
×
  • Create New...