Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
deanpien

SplitText chars problem on restart

Recommended Posts

The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.

See the Pen qEweNV by deanpien (@deanpien) on CodePen

Link to post
Share on other sites

Thanks for the demo.

 

This appears to be an overwriting issue which occurs when your explosion of letters happens before a letter has finished animating in.

When 2 tweens compete for control of the same properties of the same objects at the same time, the newer tween ends up killing the previous tween (thus removing it from the timeline). Due to the random start time of your staggerFrom() tweens, this happens occasionally. I think you can just make that random offset larger to avoid it.

 

I added some code to detect when the overwriting happens

 

TweenLite.onOverwrite = function(overwritten, overwriting, target) {
  console.log(overwritten)
  console.log(target.innerHTML)
}

In one case where the letters e and r would not tween on second plays, this is the console log:

http://prntscr.com/6v3ipy

 

you see the tween that was overwritten and the text of its target.

 

Try it here: http://codepen.io/GreenSock/pen/vOBxXg

  • Like 2
Link to post
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.

×