Jump to content
Search Community

Trying to hook into AngularJS ng-show with Greensock Animation

jstafford test
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

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

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

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