Jump to content
Search Community

How to handle situation where more than one "onUpdate" callback is required.

onedesign test
Moderator Tag

Go to solution Solved by Carl,

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

As posted here before, I've created a javascript utility called Anim Panel () to make previewing and editing Greensock timeline animations easier.

 

Anim Panel currently makes use of an `onUpdate` event callback on the passed-in timeline to update the scrubber, current time, etc. Obviously, this poses a problem when the user wants to add their own custom `onUpdate` callback to the timeline, as each timeline is only allowed to have one callback for each type.

 

Any suggestions on how to get around this? Is there an alternate method of hooking into the timeline for updates that won't interfere with a user adding custom update callbacks?

 

Top priority is convenience for the user, so would prefer something that doesn't require them to have knowledge of how Anim Panel works internally.

 

Thanks!

See the Pen rLQxaY by cmalven (@cmalven) on CodePen

Link to comment
Share on other sites

  • Solution

hmm, interesting dilemma. Here's an idea:

 

Once you know what timeline they want to plug into AnimPanel, add a new tween to the beginning of the timeline with a duration the same as the timeline. Give this tween its own onUpdate to handle all the scrubber control and stuff. This way you are not interfering with the user's own onUpdate on the timeline

 

function animPanel(tl) {

tl.to({}, tl.duration(), {onUpdate:animPanelUpdate}, 0)

function animPanelUpdate(){
  console.log(tl.progress());
}

}
 
  • Like 2
Link to comment
Share on other sites

Another option (not necessarily better) is to just wrap the user's onUpdate inside yours:

var userOnUpdate = tl.vars.onUpdate; //original
var userScope tl.vars.onUpdateScope;
var userParams = tl.vars.onUpdateParams;
tl.eventCallback("onUpdate", function() {
    //do your stuff...
    //then call the user's onUpdate if they defined one...
    if (userOnUpdate) {
        userOnUpdate.apply(userScope, userParams || []);
    }
});

The only down side to the [very clean] approach Carl suggested is that if the timeline changed duration at some point (like if more tweens were added or removed), the onUpdate wouldn't sync anymore because its duration was locked in at the time of insertion. 

Link to comment
Share on other sites

Yes, exactly. 

 

Another approach is to just add a "tick" event listener at the root level and then run any logic you want. 

TweenLite.ticker.addEventListener("tick", function() {
    //do stuff...

    //if you only want to do it while that timeline is running...
    if (tl.isActive()) {
        //do stuff...
    }
});
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...