Jump to content
Search Community

onComplete for all tweens

Eirinn 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

Is there a tween complete global event that gets pinged when a tween is done?

 

I want all tweens to trigger a global complete event (using it for resize purposes) so I don't have to add an onComplete to each and everyone of them :)

Link to comment
Share on other sites

Hello Eirinn, and welcome to the GreenSock Forum!

 

individual tweens can have a special property of onComplete. But you can also use onComplete in a TweenMax, TweenLite, TimelineLite, or TimelineMax constructor vars ..

 

Codepen seems to be having issues right now, so i can't make a live example.. but you could do something like this:

var obj1 = document.getElementById("obj1"),
    obj2 = document.getElementById("obj2");

var tl = new TimelineLite({onComplete:masterComplete});

tl.to(obj1, 1.5, { autoAlpha:1, onComplete:childComplete1 });
tl.to(obj2, 1.5, { autoAlpha:1, onComplete:childComplete2 });

// onComplete callback for  parent timeline fires when whole timeline completes
function masterComplete(){
      console.log("master onComplete callback");
}

// onComplete callback for  1st tween fires when 1st tween completes
function childComplete1(){
      console.log("child tween 1 onComplete callback");
}

// onComplete callback for 2nd tween fires when 2nd tween completes
function childComplete2(){
      console.log("child tween 2 onComplete callback");
}

// The above outputs the following to the console in order:
// 1 - "child tween 1 onComplete callback"
// 2 - "child tween 2 onComplete callback"
// 3 - "master onComplete callback"

:

The above show how you can have a onComplete callback on your master timeline and have separate onComplete callbacks for its children tweens.

 

Resources:

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

Does that help? .. Unless I am misunderstanding your question?

  • Like 1
Link to comment
Share on other sites

GSAP does not use a generic event system, just callbacks, so there isn't anything like you're asking for sorry. GSAP is developed with high performance in mind, and for the majority of use cases callbacks suffice, so it was decided that it wasn't worth the added file size and loss in performance. We're always interested in understanding the way users are using GSAP however, so if you'd like to add more explanation to why you want to do this in your project then the developers will at least have something to take into consideration.

 

If you really need to run an onComplete on every tween, something like this might be worth trying

function vars(v) {
  v.onComplete = myFunction;
  return v;
}

TweenLite.to(element, 1, vars({ x: 100 }));
  • Like 2
Link to comment
Share on other sites

Thx for the kind welcome!

 

Sure I can elaborate:

 

The application I'm writing is being iFramed. To control the height of the iFrame there's a PostMessage system running, acting as a two way communications system. The application will change in height (tweened) on UI interaction. Instead of having the application ping its parent every second to update the height I'd like to only update height on tween completes. Since this application is supported by multiple people (and because brains can be forgetful), I think it'd be nice to set up a catch all system to ping the parent frame with a new height. Hence the "global" oncomplete :) (that and the individual tweens may or may not have an oncomplete of their own already).

 

I could send every onComplete function through a relay function, but if you forget that it needs a relay you introduce a bug in the code.

 

I agree that it's a niche case though.

 

PS: I use TweenMax, also thx for the fast replies!

Link to comment
Share on other sites

  • Solution

Jamie's solution above seems like the best fit at the moment, although I don't think that pinging the parent window once every second is that bad either.

 

It's definitely good to hear about your unique needs as they will definitely help us as we consider API changes moving forward. Right now it is unlikely though that we will implement an global event system quickly.

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