Overlapping angular views

[hareeshch]

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

[PointC]

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.

[OSUblake]

@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