Jump to content
Search Community

how can i add empty time in timeline?

singlexyz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @singlexyz,

 

I'm not sure what you want to achieve ("empty time"?). Here is a variant (?):

 

See the Pen 2881e4078fa3e5a26e6fb6c99331e624 by mikeK (@mikeK) on CodePen

 

Please have a look to these positioning options:

 

tl.staggerTo(myArray, 1, {left:100}, 0.25);  //appends to the end of the timeline
tl.staggerTo(myArray, 1, {left:100}, 0.25, 2);  //appends at exactly 2 seconds into the timeline (absolute position)
tl.staggerTo(myArray, 1, {left:100}, 0.25, "+=2");  //appends 2 seconds after the end (with a gap of 2 seconds)
tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel");  //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there)
tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel+=2");  //places 2 seconds after "myLabel"

 

Happy tweening ...

Mikel

  • Like 3
Link to comment
Share on other sites

I had trouble understanding exactly what you want, but if you want the firebrick divs to wait 3 seconds until wheat is done AND you want the whole sequence to repeat you can use just 1 timeline.

 

tl1.staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05)
    .staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05)
  .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05, "+=3") //wait 3 seconds before box2 starts
    .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05)

 

 

See the Pen mpLVZx?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you need something different please clarify the exact order things should happen and how the delays and repeats should work. I wasn't sure if the wheat should start repeating on its own before redbrick started.

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