[allDone on two separate SplitText elements]

Hello,

 

I guess my problem wouldn't be such to an experienced person, however, since I'm not good at JS at all, I have this case where I am applying split text effect on two separate h1 tags and when I try to apply allDone on both of them, it doesn't work.

When I apply allDone on the first h1, the second h1 doesn't get affected by the split text effect at all.

When I apply allDone on the second h1 tag it all works but, of course, I would also need allDone applied to the first h1 as well.

 

Also, defining the function for allDone two times doesn't work as well...

 

Thank you!

 

var tl = new TimelineLite, 
    mySplitText = new SplitText(".is-returning h1.line-1"), 
    chars = mySplitText.chars;

TweenLite.set(".is-returning h1.line-1", {perspective:400});

tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut, delay:6.8}, 0.01, "+=0"); /*I want to place an allDone parameter here too but it doesn't work this way*/

var tl = new TimelineLite, 
    mySplitText = new SplitText(".is-returning h1.line-2"), 
    chars = mySplitText.chars;

TweenLite.set(".is-returning h1.line-2", {perspective:400});

tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut, delay:9.8}, 0.01, "+=0", allDone);

function allDone(){
  mySplitText.revert();
}