Jump to content
Search Community

Adding a Delay AFTER a tween finishes

Rhinoo test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

 

Link to comment
Share on other sites

 

 In the GSAP API and the English language, a delay offsets the start time of something. 

 

Using the delay or position parameter are literally the most logical and clean approaches for what you describe.

 

The alternate approach  @mvaneijgen supplied (adding an empty function later in time) is valid for adding "dead space" to a timeline.

 

In addition you could also add a tween on an empty object that tweens nothing for 3 seconds

 

gsap.timeline()
.to('h1', {x: 100})
.to({}, {duration:3}) // 3 seconds of dead space
.to('h1', {x: 0});

 

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

 

If you literally want to pause the timeline for x amount of seconds and then have it resume, perhaps this video and demo will help

 

 

Notice that the playhead literally stops during the pause

 

See the Pen poJjZxR by snorkltv (@snorkltv) on CodePen

 

hope this helps!

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

Quote

as for each of these elements you've got to look at the previous element to figure out what its starting delay should be.

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

if it's relative - B's delay is added on to the END of A
 

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)

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Hi @Rhinoo

 

Yup, I understand the perspective you have here "B shouldn't need to know about how long A is active for".

As you said you could just just use a loop and get the delay from the previous index. 

 

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. 

 

I think you are going to soon find that as you develop slideshows and quizzes like this where you need custom delays, custom transitions, and even allow non-linear navigation (user can jump from any slide to any slide)... timelines are going to break down fast.

 

You may be much better off with a function-based approach where you have discrete functions for 

  • animating things in
  • managing delays  (showing progress bars, timers, etc)
  • removing current slide

I often take an approach where I'll have a function like

 

aniamteIn(index) {

 // trigger the animation that animates the "index" slide in

// when that animations finished fire an onComplete that triggers the delay via the wait() function

}



wait(interval) {

 // wait for interval to expire

// show progress bar or timer

// when done fire functions to animate the current slide index out

//animateOut(index)

// animateIn(index++)

}

 

This is a very rough outline but this setup allows you to animate FROM any slide to any slide with any animation you want and any custom delays.

It even can be fully automated as each animation and function just triggers the next in the array of things.

You could build it all out off of a single array as you mentioned.

 

 

This functional approach can become a bit cumbersome to track through as you add features. more advanced programmers might prefer an object-oriented approach where you have Slide Objects and a TransitionManager that does all the heavy lifting. 

 

The point here is just that timelines are EXCELLENT for building sequences that need to play straight through on their own or perhaps need scrubbing or reversing.

 

As you add more complexity you will find you will have much more flexibility generating specific animations on demand (via function calls) and handling delays / timers / progress separately.

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Quote

Despite this being marked as solved within minutes, the replies continued telling me I had misunderstood, that it wasn't necessary, laughing emoji etc


Oh no! So sorry if the tone came off the wrong way. I was laughing because I replied just as I saw Carl was typing and I realised I was 'hijacking' his thread by replying. 

I definitely wasn't laughing at you. Mortified that you thought that.

 

We pride ourselves on not making people feel insecure over here. We were equally just trying to understand what your question was about. There was no judgement. People misunderstand things here all the time, that's what forums are for! 

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