Question about Syntax: Beginner.

[SpaceMoney-01011000]

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

[Rodrigo]

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!!!

 

[SpaceMoney-01011000]

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!