AngularJS Animate: Run two animation types concurrently

Question

I am trying to run two different animation types concurrently - a fadein for the data elements and have the background expand (height) at the same time. The issue is that the fade doesn't appear to be working at all. If I remove the height animation, then the fade will work. But I can't seem to be able to get both to run concurrently.

Here's the Plunker.

Thanks.

shaunhusain · Accepted Answer · 2014-04-01 23:14:19Z

1

These ways of doing animations aren't compatible you need to choose to use one or the other when you're combining animations. The TweenMax code manipulates CSS and properties of elements to achieve animations with lots of control. The angular $animate service just adds and removes CSS classes and basically watches for transitions that are occurring in the process to allow you to control the entire animation using CSS. The problem is if TweenMax is also modifying the classes or directly changing the styles it's going to botch the css you setup for $animate.

http://docs.angularjs.org/api/ngAnimate/service/$animate

http://www.greensock.com/category/javascript/#

answered Apr 1, 2014 at 23:14

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Animate: Run two animation types concurrently

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related