Jump to content

Flash Floods

Greensock for Angular Sliding Panel?

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

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!




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


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


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

  • 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.