reverse on elements on staggerTo issue

[erikb]

See the Pen qlspD by anon (@anon) on CodePen

 

When I run this fork, it often misses the last period in the sentences.  Sometimes it misses a few of the last characters.  What's going on here?

[Rodrigo]

Hi,

 

I don't know if this solves the issue:

var $quote = $("#quote"),
    mySplitText = new SplitText($quote, {type:"words"});

TweenLite.set($quote, {perspective:400});

//kill any animations and set text back to its pre-split state
function kill(){
  mySplitText.revert();
}

$("#chars").click(function() {
  kill();
  mySplitText.split({type:"chars, words"}) 
  TweenMax.staggerFrom(mySplitText.chars, 0.6, {scale:4, autoAlpha:0,  rotationX:-180,  transformOrigin:"100% 50%", ease:Back.easeOut, onComplete:function(){this.reverse();}}, .02);
})

//revert the text back to its pre-split state
$("#revert").click(function() {
  mySplitText.revert(); 
})

Rodrigo.

[GreenSock]

Thanks for bringing this to our attention. There are actually a few issues going on here. First, by default the "smoothChildTiming" property is false for TimelineLite and TimelineMax instances, meaning that any tweens you place into them will have their startTime locked into place. That's typically what people prefer when creating their own timelines, but it looks like the behavior you want is smoothChildTiming:true.

 

Imagine the virtual playhead of the timeline as it interacts with a particular tween, and let's say it gets 75% finished with the tween and then you reverse() that tween. If it just reverses in-place (meaning its start time doesn't move on the timeline), then you'd suddenly see it render at 25% finished and it would continue backwards to 0%. If, however, smoothChildTiming is true, it will literally pick that tween up and move its startTime so that it appears to play seamlessly. 

 

So when you create your TimelineLite, just pass smoothChildTiming:true in the configuration object. At least in theory...

 

However, your example exposed a problem that needed to be fixed internally with GSAP related to sequences created with staggerTo() or staggerFromTo() or staggerFrom() convenience methods (the internal TimelineLite that gets created wasn't inheriting the parent timeline's smoothChildTiming property), so I've attached a preview of the upcoming 1.11.3 release. Please give it a shot and let us know if it works well for you. And please accept my apologies for the glitch. It's a tricky one to identify and nobody has reported a similar problem in the past (at least from what I can remember). It should be all fixed up in the attached files. 

GSAP_1.11.3_preview.zip

[erikb]

Thanks for your thoughtful response.  

 

I was just fiddling around with your examples and came across the glitch.  

 

Should I need to implement this behavior, I will be sure to use this updated version (or look to see if this fix has landed on your github repo).