Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mark.tingson

Question about onComplete if parent Timeline is repeating.

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

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×