Jump to content
GreenSock

SpaceMoney-01011000

Question about Syntax: Beginner.

Go to solution Solved by Rodrigo,

Recommended Posts

Greetings!

I'm looking at an example from Most Common GSAP Mistakes and I'm curious what the string "<"  in the syntax represents? When I delete it, it doesn't do anything, and when I change it I don't see any changes.

Here are the lines I'm curious about;

.to(squareTop, {fill: "#32e0c4"}, "<")
 .to(squareBottom, {fill: "#32e0c4"}, "<")

 

I understand that two small squares of the animation are receiving a change of color, but not sure what "<" is affecting.

If anyone would graciously be willing to take a moment to help me fill out my understanding, I would be very appreciative.


Kind regards,
X

See the Pen mdVPOQV?editors=0110 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hello,

 

The less than(<) and more than (>) signs are used to set the position of the current animation, relative to the previous animation added to the timeline. Less than means when the previous animation starts and more than after the previous animation ends. In your code all three animations happen at the same time. The first animation at zero(0) seconds, then the second animation is added with <, which means that the animation will start at the same time as the first animation, finally the third animation is added with < (same as the second), so that animation will start when the second animation starts. Since the first animation starts at zero seconds, the second starts at the same time and the third starts at the same time as the second and therefore the first one.

 

Here you can find more details and examples about the position parameter:

Happy Tweening!!!

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

35 minutes ago, Rodrigo said:

Hello,

 

The less than(<) and more than (>) signs are used to set the position of the current animation, relative to the previous animation added to the timeline. Less than means when the previous animation starts and more than after the previous animation ends. In your code all three animations happen at the same time. The first animation at zero(0) seconds, then the second animation is added with <, which means that the animation will start at the same time as the first animation, finally the third animation is added with < (same as the second), so that animation will start when the second animation starts. Since the first animation starts at zero seconds, the second starts at the same time and the third starts at the same time as the second and therefore the first one.

 

Here you can find more details and examples about the position parameter:

Happy Tweening!!!

 



Okay, now I see what's happening... The small squares are animating at the same time, but if we remove the"<" position parameter, then the small squares animate in chronological sequence.

I didn't notice it because it was so subtle. After your explanation, I see what's going on.

Thank you for taking the time to answer my question!

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