Jump to content
Search Community

Relative positioning prefixes: what is the difference between ,">" and , ""

Thomas James Thorstensson test
Moderator Tag

Recommended Posts

Hello Greensockers of Iceland and other green areas of this planet :)

 

I'm a bit confused about what the difference is between the two below.

 

From GSAP 3 Release notes :

 

">" references the most recently-added animation's END time

 

.to(..., "") //starts immediately after the previous tween's end time (sequenced)

 

 

Is not the most recently added animation the same thing as the previous tweens end time so aren't the two above the same?

 

Thanks

 

Thomas

Link to comment
Share on other sites

2 hours ago, Thomas James Thorstensson said:

.to(..., "") //starts immediately after the previous tween's end time (sequenced)

 

That comment is relevant to the example code. And maybe it should be written like this instead.

 

tl.to(...)
  .to(...) //starts immediately after the previous tween's end time (sequenced)
  .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)

 

If you don't supply a position parameter, or use a relative one, like"+=1", it will be positioned at the end of the timeline. Using >  positions at the end of the last of the most recently added animation's end time.

 

Keep in mind that you don't have to position everything sequentially, and can add stuff to a timeline later on. Check how the start time of the scale animation differs in these examples.

 

The scale animation starts at 2 seconds because that's the end time of the timeline when it gets added.

 

tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 2 seconds
  .to(".box", { scale: 0.5, duration: 1 });

 

Here, the scale animations starts at 1 second because the y animation is the most recently added animation, and its end time is 1 second.

 

tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 1 seconds
  .to(".box", { scale: 0.5, duration: 1 }, ">");

 

 

 

  • Like 5
Link to comment
Share on other sites

2 hours ago, OSUblake said:

 

That comment is relevant to the example code. And maybe it should be written like this instead.

 


tl.to(...)
  .to(...) //starts immediately after the previous tween's end time (sequenced)
  .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)

 

If you don't supply a position parameter, or use a relative one, like"+=1", it will be positioned at the end of the timeline. Using >  positions at the end of the last of the most recently added animation's end time.

 

Keep in mind that you don't have to position everything sequentially, and can add stuff to a timeline later on. Check how the start time of the scale animation differs in these examples.

 

The scale animation starts at 2 seconds because that's the end time of the timeline when it gets added.

 


tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 2 seconds
  .to(".box", { scale: 0.5, duration: 1 });

 

Here, the scale animations starts at 1 second because the y animation is the most recently added animation, and its end time is 1 second.

 


tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 1 seconds
  .to(".box", { scale: 0.5, duration: 1 }, ">");

 

 

Hello

 

Thanks. The last two blocks of code made me realise what the difference is! I felt like I was driving down a murky rainy road in Montana in a jaguar, then looked up through the autumn trees and saw the sun, and the road cleared ahead.

 

Thanks again!

 

Thomas

2 hours ago, OSUblake said:

 

 

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