Jump to content
Search Community

Timeline Performance over 30 mins of dynamic data?

Polarathene 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

Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows.


I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened).


If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?

Link to comment
Share on other sites

For the record, in the vast majority of cases, the performance bottleneck has nothing to do with GSAP (which is just JavaScript execution), but rather browser graphics rendering. So it's not so much about reducing the number of tweens - it's about organizing things in a way that reduces the load on the browser in terms of graphics rendering and layout calculations. One way of doing that is to set display:"none" or visibility:"hidden" on the elements that are scrolled out of view. You can do that directly in the tween so that when you reverse or whatever, the tween takes care of toggling the value when appropriate. 


Then again, if you're literally creating like 10,000 tweens and trying to scrub through them on a timeline, that could affect performance :) In that case, I'd segregate them into groups of nested timelines, with maybe 100 or 200 tweens in each. But I doubt that'll be necessary.


If you run into trouble, maybe create a codpen example that we can see. It always helps to see the problem in context, particularly in a reduced test case. 

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