Jump to content
GreenSock

hareeshch

Overlapping angular views

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,

If i continuously to trigger another animation while ngAnimate is still animating,views in angular get overlapping.

 

i am using GSAP animations for view animation (enter and leave) then i need to handle the cancellation event via a cancel callback in my animation definition.

 

Please help me with sample code for angular animation

Link to comment
Share on other sites

Hi hareeshch,

 

I'm not an Angular user myself, but you may find a few people willing to answer Angular questions around here. This is a GreenSock forum though, so we focus most of our attention on GSAP related questions and problems. That being said, you can find several posts about Angular. Just use the search feature on the upper right section of the page. Here are a few that may help:

 

http://greensock.com/forums/topic/9443-gsap-angular-js/

http://greensock.com/forums/topic/13594-greensock-tweens-in-angular-2/

http://greensock.com/forums/topic/10822-easier-animations-in-angular-13/

http://greensock.com/forums/topic/14090-gsap-with-angular-directives/

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

@PointC provided some good Angular links, but I don't think they provide the answer you're looking for. However, the solution is very easy. Just position your elements absolute. This will prevent them from stacking on top each other when they are being added and removed from the DOM.

 

Some examples...

http://plnkr.co/edit/7E7HKQ?p=preview

http://plnkr.co/edit/gDtuKf?p=preview

See the Pen b2cbb2dd2124e04d816f517ff561e1d4 by osublake (@osublake) on CodePen

See the Pen 2d6445c25aedbfd4cf94834ccea925a5 by osublake (@osublake) on CodePen

See the Pen eJBaga by osublake (@osublake) on CodePen

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