Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thomas James Thorstensson

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

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×