Animating an element that has an animation?

[sunbinyuan]

Hi,

I just started to use GSAP to animate a birthday webpage I want to make. However, I found myself stuck while trying to scale some balloons that already have animation using the CSS3 "animation". I found that the problem was the "matrix3d" transformation being applied to the element instead of "scale". 

Notice that the third and fifth balloons are working properly as they are being scaled.

This is the script I have been using for all the balloons:

  var ballonTl = new TimelineMax();
  ballonTl
    .from(".stagger", 1, {scale: 0.1, opacity: 0, ease: Elastic.easeOut}, 0.2);

On Firefox, I ran to the same issue while on Edge, it didn't scale at all. Help would be appreciated!

[ZachSaucier]

Hey sunbinyuan,

 

Could you provide a CodePen demo of your work so far please? That would help us see the type of error you're facing as it's not clear from your post

[Carl]

Like Zach said, a CodePen demo that we can investigate would be very helpful.

 

In general it is advised that you don't try to mix GSAP with CSS animations / transitions as it is very likely that both will be fighting for control of the same properties.