Jump to content
Search Community

Animations cancel each other out

GVI02 test
Moderator Tag

Recommended Posts

I was in the middle of a project when I ran into this problem. This is a smaller version of the original but illustrates the issue well. The situation is as follows: there are 8 cubes in 2 rows and two buttons. The first for animating the one by one by rows and the second by columns. However, when I start the second animation it just "removes" the cubes.  Also the cubes disappear at the start so that isn't ideal. I think this might be because the animation "prepares" the values for the animation but i'm not sure.

 

Thanks in advance.

See the Pen eYpKWZG by GVI_02 (@GVI_02) on CodePen

Link to comment
Share on other sites

The biggest issue here is that you're using a .from() in the second timeline. Let's look at what happens when your pen initiates:

  1. createRowAnimation fires:
    1. All of the cubes are given width:0 and height:0 immediately due to the .from().
    2. When the timeline is ran, it will animate each cube's width and height from 0 to the default value.
  2. createColAnimation fires:
    1. All of the cubes are given width:0 and height:0 (again) due to the .from().
    2. When the timeline is ran, it will animate each cube's width and height from 0 to 0. This is because the value before the .from() is called is already 0 due to the first timeline!

Thus to fix the issue, use .fromTo() like Craig said or (what you likely want in this case so that they can overwrite each other more easily) use a .set() and then a .to().

See the Pen abvKyVW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 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.
×
×
  • Create New...