Rhinoo

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).

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 ...]

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.

@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). 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.

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).