Jump to content
Search Community

Is there something like Timeline.wait(2)?

Lasercode test
Moderator Tag

Go to solution Solved by Carl,

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

Hey there,

if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write 
 

tl.to({}, 2, {});

But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind.

Thanks for some input.

Link to comment
Share on other sites

You're not missing anything. There is no method like that, so what you're doing is perfectly fine.

 

That said, there's no reason you couldn't make your own method to do that. 

TimelineLite.prototype.wait = function(position) {
  return this.set({}, {}, position);
};

Pretty simple. TimelineMax inherits from TimelineLite, so you don't have to add it to both.

See the Pen ad5ca0706fe250e0b2a79ade9fb3852b?editors=0010 by osublake (@osublake) on CodePen

.

  • Like 2
Link to comment
Share on other sites

Thanks mate.

I would strongly recommend adding this to the lib to be honest. It seems like a very small effort for a very high user convenience, and I even used wait functions in flash already. It definitely is something very very common in programming animations. Especially in banner animations.

I didnt find a sticky/pinned feature request thread, so could you pass this issue or shall I open a new thread?

Cheers

Link to comment
Share on other sites

  • Solution

Hi lasercode,

 

Thanks for the question. I'm not quite sure I understand when or how often this is necessary. Using the position parameter does exactly the same thing:

tl.to(obj, 1, {x:200}
  .to(obj, 1, {y:200}, "+=2") // added 2 seconds later

Sometimes people want some dead space between the last tween in a timeline ending and the onComplete callback firing, in which case a dummy tween like you are using works fine, but that's a pretty small use case. 

 

Could you provide a demo or more detailed explanation of when wait() is needed?

  • Like 5
Link to comment
Share on other sites

Hey Carl,

I see.. While writing a longer text to explain the neccessities, I realized that my way of organizing the timeline is probably just wrong.
I am more of a creative than a coder and I got used to use ONE timeline, where I use the position param mainly for keyframe names to define animation "blocks" and add delays inside those blocks (like "start+=0.5" or "state2-=0.3" etc). The "wait" would then make things easier to divide into animations and pauses, if you get my thought. My creative mind makes a difference between times where stuff happens and where nothing happens. And it's way better to read a "wait" in the tween chains.

But okay. I can really use blakes prototype function then.
If I get things right, the main fault of mine is, that my "blocks" of animations (like former movie clips in Flash) should probably be split into different timeline objects, but I got a question here, just to understand how to do things right:

Can I chain timeline objects, and can I make use of the position params in the same manner like in Tweens?

Like having tl1 and tl2 being TimelineMax objects and then just chaining them easily to get one whole animation with a break of X seconds in between them?

It's not easy to explain for me, so please ask, if something sounds weird.

Thanks so much.

Link to comment
Share on other sites

Hi Lasercode :)

 

If I understand your question correctly, yes - you can add the position parameter to nested timelines. 

 

You can create all your timelines in functions and then add them to a master timeline. When adding to the master, you simply add the position parameter. Creating pieces of your animation in small sections is a great way to work as you can move them around the master timeline easily.

 

Here's a simple example of creating timelines in functions which are then added to a master with position parameter delays.

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

 

Hopefully that's what you meant and it helps a bit.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

How dare you give Carl the coveted "Best Answer" credit!  :lol:

 

I'll always defer to Carl on GSAP matters. He's pretty smart plus he's got that cool green cape and could squash me like a bug.

 

Glad to hear your problem is solved. 

 

Happy tweening. 

:)

  • Like 3
Link to comment
Share on other sites

Great job, Craig. Love the demo.

 

Lasercode, 

 

Thanks for explaining your perspective. Very understandable. What Craig illustrated is probably one the most powerful and important techniques to get into your workflow. Once you do it a few times you will wonder how you lived without it.

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