Dynamically created timeline

[Exhumator 6 Likes (Newbie)]

What's up good people

 

I am trying to create my own TimeLine which will show the element (red box) at the random positions for 50 times. Moreover, it should change background color to random between red, green, blue everytime before the box shows up. I am not sure how to do it. Should I define TimeLine, stop it, then add there instructions via "for" loop for 50 times and then run the Timeline via play() method?

 

I think i am doing it wrong, maybe it can be done another way...

[Shaun Gorneau 1,503 Likes (Superhero)]

Hi @Exhumator, you'll probably want to give function-based values a look. Check out this pen

 

See the Pen pONXRq by sgorneau (@sgorneau) on CodePen

 

[Exhumator 6 Likes (Newbie)]

Thanks, @Shaun Gorneau, it works fantastic. If I may ask you one more question - is there any way to make it like this?

 

1. Box will be set to random X and Y position.
2. A random text will be given to the box from the array.
3. Box will show up.
4. This will repeat 50 times.

 

I understand now that i must use callback functions to make asynchronous action while tween is happening. But i can't imagine situation like this, when more actions are happening one by one.

[Shaun Gorneau 1,503 Likes (Superhero)]

Sure thing ... but I want to clarify something before pointing you in a direction ... 

 

5 minutes ago, Exhumator said:

1. Box will be set to random X and Y position.
2. A random text will be given to the box from the array.
3. Box will show up.
4. This will repeat 50 times.

 

 

3. By "Box will show up" ... do you mean appear instantly at X/Y, or tween to that position, fade in, something else? And what duration of time between "repeats"?

 

[Exhumator 6 Likes (Newbie)]

It should X, Y position while it is hidden and then it should fade in. Duration (pause) between this tween should be 1 second. So, for example:

 

1. Element is hidden, invisible... and we set its X, Y to random.
2. We set inner text to random from the array.
3. Box will fade in (duration 0.5s).
4. Box will fade out (duration 0.2s).
5. Pause for 1 second.

And it goes again for 50 times.

[Shaun Gorneau 1,503 Likes (Superhero)]

If I understand correctly ... this should do the trick (you can play with timings).

 

See the Pen ZMBgje by sgorneau (@sgorneau) on CodePen

 

[Exhumator 6 Likes (Newbie)]

Wonderful, it works perfectly

So, if I understand it right, you defined instructions via SET, ADD and TO methods and also with callbacks. Can i use play, pause, resume options also? I am sorry for stupid questions, but I am still trying to fully understand how this magic is happening

[PointC 8,599 Likes (Superhero)]

7 minutes ago, Exhumator said:

Can i use play, pause, resume options also? 

 

Yep - you can control the timeline all you like. What @Shaun Gorneau has done is to create one big timeline with 200 children. You can now control the whole thing with tl.pause(), tl.resume(), tl.timeScale() etc...

 

Make sense?

 

Happy tweening.

 

[Exhumator 6 Likes (Newbie)]

2 minutes ago, PointC said:

Make sense?

Yes, sir.

 

2 minutes ago, PointC said:

Happy tweening.

Same to you, mate