Jump to content
GreenSock

erikb

reverse on elements on staggerTo issue

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

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

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