Jump to content
Search Community

about more features like repeat

blueaqua 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 using TweenLite and TimelineLite for a while. And it works great! But When I need the Tween repeat feature, I must use TweenMax which file size is 4 times than TweenLite even after compressed. And this affect my page load performance. So could you move the repeat feature into TweenLite, or make the extra features like repeat, yoyo to be plugins of TweenLite/TimelineLite? Thanks!

Link to comment
Share on other sites

This is much trickier than you might expect. Let me explain:


Most tweening engines use a "fast and dirty" technique for repeating which involves waiting for the tween to finish, and then just restarting it at that point. However, this technique is plagued with timing issues related to the fact that frame rates are rarely perfect and there can be small delays  that cause the final render to be tardy. Imagine a 0.5 second tween that actually finishes in 0.6 seconds because the browser was busy handling a lot of rendering tasks. That means the next iteration of the tween is 0.1 seconds late. Then if that next iteration has the same thing happen, the whole sequence of iterations is now 0.2 seconds off, and so on. It can quickly add up. 


GSAP is specifically built to allow everything to be perfectly synchronized, so these "little" inaccuracies are intolerable. What if you built an animation that required a tween to repeat 10 times and then another tween of a different object starts at exactly the moment the 10th repeat finishes, all sequenced nicely inside a TimelineLite? With the "quick and dirty" repeat technique, things would no longer by synchronized and it'd be REALLY annoying. 


Plus, try jumping to a specific time in the iterative sequence, like if you have a 0.5-second tween that repeats 100 times (thus 50 seconds long) and you want to jump to exactly the 15.34 second spot? With TweenMax, that's simple. tween.totalTime(15.34). With other engines, it's pretty much impossible unless you figure out the math yourself and reset the number of repeats thereafter, etc.  


The code in TweenMax and TimelineMax that handles the repeat and yoyo functionality is much more precise, but consequently it also costs more kb. That's not acceptable to add into TweenLite's core because one of the top goals in TweenLite is to keep file size down and only have the essential features. Since you can technically accomplish repeating and yoyo-ing already in TweenLite by using an onComplete that either calls the tween's restart() or reverse() method, we can't justify the extra cost or the slight performance hit for the extra logic. 


If you want extremely precise repeats/yoyos that integrate perfectly into sequencing behaviors in the timeline classes, you should use TweenMax. However, if you need to minimize file size, you can crack open the TweenMax file and gut it of any extra classes that you don't need (like TimelineMax, BezierPlugin, EasePack, etc.). I think you'll find that they're pretty well commented in terms of where they're located in the source. 

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