Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fakebook

Best way to tackle complex independent timelines

Recommended Posts

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

Link to comment
Share on other sites

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/

 

:)

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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

 

 

  • Haha 4
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.
×