dynamic add animation when previous animation is still running?

[sejabs]

I am a newbie with html5 animation area and I found GSAP. It's a powerful tool! However, in my project, I faced a knotty problem:  there is a image producer which randomly output various images into a folder. I choose Chokidar to watch the folder and push the added image path to an array when 'add' event occur. Then I need periodically (e.g. 1s) choose the first element of the array to show it in the window frame and fade it within e.g. 3s.  When the animation is finished,  the array pop the element animated previously.

After using GSAP timeline, I realized the tool normally need all elements participating in the animation to be statically completely designed at start point. Maybe I am wrong? or any feasible ideas? Thanks!

[Dipscom]

Hi Sejabs,

 

Welcome to the forums!

 

We always ask people to provide a reduced case example to make it easier to help. In your example what I think you are trying to achieve is quite straight foward but I am not sure I understood your situation correctly. So, if you could show us what is it that you are trying to achieve, would be of immense help. For example, I have no idea what Chokidar is. Nor I understand why you need to watch a folder and add an image path to an array if you are already watching said folder.

 

In regards to the GSAP specific bits, you are correct when you say the timeline expects all of its components to be present in order to do its job correctly. One of the reasons being it has to calculate the element's attributes before to tweening them. However, there are ways around it.

 

One such way would be to have a timeline do whatever animation it is that you want, pause at your desired point, call a function that would animate the new image from the array, including removing the element from said array at the end of it and then, at the end of this other animation, the timeline would be told to continue playing.

 

To me, it would be totally feasible. If I understand what you want correctly.

[Carl]

the demo below shows how you can create elements and add them to an existing animation that is running.

Once the demo loads, hit the button a bunch to create elements. Their animations will be inserted at the timeline's current time()

 

See the Pen moWqjP?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[sejabs]

thank you for your kindly reply! I have found a similar animation code in our forum, and fork it:

See the Pen pYPjOp by jasonsebas (@jasonsebas) on CodePen

however, there is a big issue, i.e. new created box element keeps trace with the first three elements, which is not meet my expectations.

[sejabs]

After self-learning for a while, I can solve mine problem. If I want to dynamically add a animation when previous animation is running, I can use the code above and change the added animation position from

i*0.25

to

t.time()

Cheer GSAP for its powerful!