Jump to content
GreenSock

sunbinyuan

Animating an element that has an animation?

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

post-43378-0-09186500-1460318439_thumb.png

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

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