allDone on two separate SplitText elements

[jdbones]

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();
}

 

[Visual-Q]

I believe to call your function you would want to use onComplete or in the case of a staggeroTo I think its onCompleteAll in the tween, OR use  onComplete on the timeline. In your case I think you would want it on the timeline(s).

 

var tl = new TimelineLite({onComplete:allDone}) ;

or

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

 

[sensenel]

just out of curiosity
I had the same issue and end up with this
 

var headerSplitText = new SplitText("#headerStart", {type:"chars"});
headerArray = shuffleArray(headerSplitText.chars); // pass to an function for scrumbling my string and return it as array

//lot of other tweens before etc
//then this:
.staggerFromTo(headerArray, 0.5, { opacity: 0, color: "#2962ff" }, { opacity: 1, color: "#fff", repeat: 2 }, 0.1, "start+=2", allDone, [headerSplitText])

// followed by even more tweens ... 


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

		

now at the very end of my tween i pass thru my origin splitText object as parameter for the allDone function - i was surprised that this works 

is it ok to leave it just like that? 

 

for having allDone ready also for other strings and not just this particular one 

What do you guys think? 

thanks a lot 
 

[Sahil]

@sensenel What you are doing is correct and it will work for all SplitText objects as long as you are passing correct instance as parameter. If you have 40-50 SplitText objects then you can go through the trouble of creating function that will take all values like target element, duration, vars, basically everything as parameters and construct your tweens. Otherwise keep it simple as you are doing at the moment.

[sensenel]

HI Sahil, 

Thanks for the feedback ^^
I just want to know for sure and this is realy awesome! (again! )
Right now the amount of tweens start to make me think - how much can it take and performance issues will occur ...?
At the same time i want to have it as much compact as possible, therefore im happy for every single line of code i can save

thanks again and have a nice weekend!