Flash Floods

Greensock for Angular Sliding Panel?

Recommended Posts

Hi, I'm sort of reintroducing myself here in the forums. I've used greensock in the past when I was working with Flash stuff. Now I'm mostly doing AngularJS SPA-type web applications. Recently, I've been given the task to make a button attached to a small menu off-screen initially that slides into view when the button is pressed. I'm using angular material UI, but this specific feature doesn't really fit the sidenav style or anything else, really on the site.

It would be great if I could just make the popup with an absolute position and then tween it up with greensock (I know you can probably do it with css, but when I try it just looks css animation they end up looking too wonky).

 

And now that I think about it, the fact that I am tweening something in an angular app probably doesn't really make a difference for the greensock library. 

 

BUT, I had heard about a framework called ngFX that combiens greensock with ng-animate. Is ngFX a legit library or just a thing that some guy made for fun one day? Should I go with that or would I be better off sticking to good 'ole greensock?

 

And if you do you any examples / links about using greenock specifically with angular (or I guess good ones that don't use angular) feel free to share me the links!

 

Thanks,

Jim

Share this post


Link to post
Share on other sites

Hi @Flash Floods

 

ngFX was basically a GSAP version of Animate.css. WAS is the operative word there. Don't ask, because I don't know why, but they removed GSAP and it replaced it with CSS animations.  :shock:

 

But do you really need a bunch of pre-canned animations? Doing animations in Angular with GSAP is real easy. I try to put most of my animation logic in an animation module if possible, although sometimes that's not always ideal. Here's a simple example of using an animation module to animate a box to the center of the screen.

 

http://codepen.io/osublake/pen/5d9d6fe688766b469f5d4db88ef069b2?editors=0010

 

Also, just search around the forums for Angular. I've posted a lot of different examples.

  • Like 2

Share this post


Link to post
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.