Jump to content
Search Community

Best way to tackle complex independent timelines

Fakebook 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

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

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

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