Jump to content
GreenSock

mark.tingson

Question about onComplete if parent Timeline is repeating.

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

So I have a Timeline that has a series of staggerFrom. Each staggerFrom has an onComplete event that fires properly. However, I want my parent Timeline to yoyo: true, and repeat once (repeat:1, repeatDelay:1) so it reverses back. If I add those parameters, the onComplete event from each staggerFrom is not firing on reverse.  Is there anything I am missing? TIA!

 

Please note that I need to get some properties of the element (like the width and left position) after the each stagger animation.  And I have multiple staggerFrom and tweens within my parent timeline. 

 

 

 

See the Pen YJQVYz?editors=1111 by anon (@anon) on CodePen

 

See the Pen YJQVYz?editors=1111 by anon (@anon) on CodePen

Link to comment
Share on other sites

If I understand your question correctly, I think you could just add onReverseComplete like this:

 

tl.staggerFrom('.box',0.5,{opacity:0, onComplete:update, onReverseComplete:update},0.3)

 

Does that help?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

When a tween is nested its onComplete is not fired when its parent is being reversed because, well, the tween is not completing then... its just playing backwards from its end.

 

Instead of using staggerFrom, you can loop through each element and add a tween and a call() like so:

console.clear();
var tl = new TimelineMax({yoyo: true, repeat:1, repeatDelay:1})

document.querySelectorAll('.box').forEach(function(element, index) {
  tl.from(element, 0.3, {opacity:0}, index*1)
    .call(update, [index])
});

//enable next line if you want last tween to fire its callback when timeline reverses.

//tl.set({}, {}, "+=0.001")

//the line above adds a little teensy weensy bit of time after the last tween.
//without this the playhead will rest on the end of the last tween and when the parent reverses then the callback won't fire as the playhead is already there.

function update(index){
   console.log('completed tween' + index)
}

 

Open the CodePen console while you view:

 

 

See the Pen Zqyard?editors=0011 by anon (@anon) on CodePen

 

  • Like 3
Link to comment
Share on other sites

uh-oh, @Carl is getting clever today. ;) Nice one.

 

I honestly wasn't sure if the OP meant the forward onComplete firing again when the timeline reverses or the onReverseComplete that I mentioned.

 

Either way, well done good sir. :)

 

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