[Adding a Delay AFTER a tween finishes]

Quote

There just isn't something in the api that specifically says "wait this long after this animation finishes before doing something else".

But there are many ways to accommodate that as noted above. 

Yup - I understand that there is nothing in the API, the methods shown by mvaneijgen and yourself to add an empty entry to the timeline with a relative delay work perfectly fine. All now wrapped up in a little utility function - so thank to you both for that.

 

Despite this being marked as solved within minutes, the replies continued telling me I had misunderstood, that it wasn't necessary, laughing emoji etc (such is the way with programming forums...<sigh>) so I was just trying to explain my particular use case.

 

Anyway - thanks all.

 

(ignore the stuff about the interactive - I've lead you astray from the orig q).

[Adding a Delay AFTER a tween finishes]

6 minutes ago, Cassie said:

Not with relative delays. I think you're misunderstanding the position parameter. 

 

let tl = gsap.timeline()

tl.to(a, {rotate: 360, duration: 3}) // starts at 0 seconds and ends at 3 seconds
tl.to(a, {rotate: 360}, "+=5") // starts 5 seconds after a has finished (8 seconds)

 

 

Back to the slideshow example

• Pic A - fade in for say 0.5s, then show that pic for 3 seconds.
• Pic B - fade in for 0.5s, then show for 10 seconds ( its a really nice picture!  )
• Pic C - face in for 0.5s, then show for X seconds ...

The Pic A's 3 second display duration (not tween duration) actually goes in the line adding the tween for pic B

tl.to(a, {opacity:1, duration:0.5})

tl.to(b, {opacity:1, duration:0.5, delay:3s}; // delay B for 3 seconds to in effect show pic A for 3 seconds...

 

Trivial example be trivial of course (and exactly the same with "+=3") - but as you can see the data for the 3 second delay logically belongs to pic A but we using it when adding the tween for B. B needs to know about A.

 

If we were building up from an array/list

 

[{pic:A, showFor:3}, {pic:B, showFor:10}, {pic:C ...]

[Adding a Delay AFTER a tween finishes]

9 minutes ago, Cassie said:

 

Why would you need to look at the previous element? Sure, an absolute delay would involve checking what's come before and doing some duration calculations but that's why we recommend relative values - it'll just delay it by a certain amount of time - no matter what's happened before.

As explained in the slideshow / powerpoint example.

 

You want to show A for 2 seconds - then B for 5 seconds. Using relative values when you add B to the timeline you need to see what period of time you want to show A for to see what B's delay should be. B needs to know about A.

[Adding a Delay AFTER a tween finishes]

@Carl

Pause wouldn't work as there are other things going on at the same time (it would pause all animation as I understand it, although I guess I could create different timelines and pause only one but that seems overkill).

 

Quote

It could be argued though that this is the least logical approach

 

There are good reasons to be able to do it both ways I think. Lets imagine you're doing a photo slideshow app, each slide has a transition and is shown for a certain amount of time before the next slide. You would likely store in an array [{pic, transition, showSlideFor}, ...]

 

Only using the delay before the transition/tween starts then as you build this up by looping through that array you're having to look at the previous index (unless you're at the start of the array) to add the delay in. Very doable, but a tiny bit messy.

 

Now make this into an online quiz thing - some photo slides, then a video, then a multi choice question slide, then some more slides etc. etc. - all data driven and it starts to get more messy as for each of these elements you've got to look at the previous element to figure out what its starting delay should be.

 

[Adding a Delay AFTER a tween finishes]

How can you add a Delay AFTER a tween finishes, e.g. something like

 

tl.to(firstObject, 1, {opacity:1})

tl.addDelay(10)  // PSEUDOCODE Add a 10 second delay between

                 // last tween finishing and next tween starting

tl.to(secondObject, 1, {opacity:1})

 

I know I can use delay:10 on second tween or +=10 position, but to make my code as clean as possible it would be best to do this using something like the above code rather adding a delay in the following tweens. (as logically, the delay belongs to that tween, not tweens that happen to follow it).