Best way to tackle complex independent timelines

[Fakebook 2 Likes (Newbie)]

I'm curious what the best way is to tackle a project that has multiple (some time 5 to 10 at once) animations that use a complex set of tweens, but tween independent of each other. When the new elements are created/appended I originally tried to use TweenMax without a timeline on the new elements. This of course has its downfalls as it's difficult to create and if something changes, changing all the delays/timings can be a nightmare.

 

I was thinking of creating a new timeline each event, but if a user uses the page for a while, there could be hundreds and even thousands of timelines created.

 

In my example:  If you click the button multiple times, I'm currently just adding to a timeline, where the events are waiting for the others to complete before they play.

 

What do you think is the best way to handle a situation like this, while still taking advantage of the timeline? Should I create multiple timelines or something else? Will having a lot of different timelines be a big page performance hit over time?

See the Pen OEoZed by Fakebookin (@Fakebookin) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Typically it's fine to create a lot of timelines because [unless you're maintaining a reference somewhere in your code] they automatically become eligible for garbage collection when they complete. It's not like they stack up forever. 

 

I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/

 

[Fakebook 2 Likes (Newbie)]

Great, will definitely check this out - could you give me any reference for garbage collection/how to clear completed timelines?

[Fakebook 2 Likes (Newbie)]

Wow, this article is amazing, wish I found it earlier.

 

I used the method from this video, Revolutionize your animation workflow: Part 2, and used a function to create a new timeline for each event.

 

See the Pen aKaQeo?editors=1010 by Fakebookin (@Fakebookin) on CodePen

 

[GreenSock 8,117 Likes (Superhero)]

58 minutes ago, Fakebook said:

could you give me any reference for garbage collection/how to clear completed timelines?

 

You really can't control garbage collection - the browser decides when it's best to run a sweep (based on a lot of factors). 

 

Glad you found the article helpful! Yeah, I think it's one of those "must-reads" for anyone who does even moderately complex animations. 

 

Happy tweening!

[PointC 8,599 Likes (Superhero)]

The best part of that article is the really cool SVG Wars: May the Morph Be With You demo.