Jump to content
Search Community

Dynamically created timeline

Exhumator test
Moderator Tag

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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"?

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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.

:)

 

  • Like 4
  • Thanks 1
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...