Jump to content


tween engine always running

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

In this simple example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<script src="TweenLite.min.js"></script>


the chrome debugger timeline shows that RequestAnimationFrames are firing all the time, and, as you can see, there is nothing much going on.


I would like to only enable the RaF calls when an animation is actually running. How would I do that? It is okay for me to do this manually. Thank you.


And, somewhat related, for not-tween-related work in my site, I am using my own RaF shim. I am wondering if there is a nice way to plug into the RaF shim in the tweening engine (so as to reduce code redundancy)?

Link to comment
Share on other sites

Sure, let me explain a few things...

  • The browser will trigger the requestAnimationFrame roughly 60 times per second in most cases (except when that browser window is inactive) - there's nothing you can do to prevent that (as far as I know), nor should you really care (in my opinion at least). Obviously it's intended to provide hooks for animation systems to run their logic in tandem with the browser's native rendering pipeline. It isn't as though the events are chewing up a bunch of resources or slowing things down significantly.
  • GSAP does indeed tap into the requestAnimationFrame API for maximum performance. It does have one request that keeps going even when there are no active tweens, and that is by design. An explanation can be found here: http://forums.greens...5009#entry25009
  • You can definitely tap into GSAP's core ticker - that would be much smarter than duplicating code with your own stuff, especially because GSAP automatically falls back to setTimeout() if necessary. Plus it dynamically smooths the frame rate, adjusting the time between refreshes on-the-fly to maximize smoothness. All you need to do is call:
    TweenLite.ticker.addEventListener("tick", yourFunction);
    function yourFunction() {
    //do stuff...

​Does that clear things up?

  • Like 1
Link to comment
Share on other sites

Sorry for not finding that earlier post before my inquiry.


Question: are the tick events before or after tweens are updated?

Link to comment
Share on other sites

No worries. And the tick events are after the tweens are updated, although it is possible to add a listener that would get triggered before the updates (set the priority to a number higher than 0).

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