Recreating Timeline issue

[Juno911]

I have this simple timeline which splits some text and then stagger it. 

It all works well. The first time. Then randomness seems to overtake.

 

This is how to reproduce it:

Click run, then it btn1. All text is staggered fine until the end. Click another time on the btn1 and the problems start. The text is not staggered until the end. It stops somewhere randomly. Random means sometimes it staggers 3 sentences, sometimes 4 and then just stop. The curious thing is when you hit again the run button to reload the code the first time plays nice again but then the second time it stops in another position then then first run. And so on. So something interupts my timeline for some reason but the duration is checked and it is all time the same. 

Any idea why this timeline makes bad things from the second play while the first on is okay at any time? Sometimes even the second and third one is fine but I cant find any pattern which decides over that. Thanks a lot

See the Pen oPMrEV by generaal-locke (@generaal-locke) on CodePen

[Juno911]

But I figured out that (without loading new with run) the play after the first staggers always until the same position and then just stop to stagger. If you then run code again the second time will break somewhere else but then in this run will break/stop always in that position until you run again. This non static behaviour makes it dificult for me to find any reason why this happens. I am almost sure this has something to do with the kill process, but this kill process works also in front on the first time, so I dont know why it should break something first in the second play. 

[Sahil]

You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient.

 

See the Pen XPPgOB?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

I will suggest reading this article to better plan your animations,

 

https://css-tricks.com/writing-smarter-animation-code/