Many Callbacks from SplitText

[glinkot]

Apologies if this is dumb - I'm only familiarising myself with GS but it looks very promising.  I've taken the below from an example codepen, but the 'onComplete' callback executes once for every character in the div I animate.  I thought 'completeAll' might be the ticket, but I didn't get that happening.  Am I missing something obvious?

 

Thanks

 

// Takes a text div id eg #myDiv or .blah

export function DivPerspectiveAppear(identifier: string): void {

var tl = new TimelineLite,

mySplitText = new SplitText(identifier, { type: "words,chars" }),

chars = mySplitText.chars; //an array of all the divs that wrap each character

TweenLite.set(identifier, { perspective: 400 });

tl.staggerFrom(chars, 2, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: g.Back, onComplete: doStuff }, 0.01, "+=0");

}

export function doStuff(): void {

console.log("it is done.")

}

 

[Dipscom]

Hi ,

 

Welcome to the forums!

 

The .stagger() family of methods have a onCompleteAll parameter that is after the position parameter like:

 

.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )

 

See the full description in the docs: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerFrom/

 

The way you have it setup, the onComplete call will be invoked at the completion of each of the elements being tweened. Not at the end of all tweens.

 

You will want your code to be:

tl.staggerFrom(chars, 2, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin:"0% 50% -50", ease: g.Back }, 0.01, "+=0", doStuff);

[glinkot]

Brilliant!  Thanks so much for the prompt help Dipscom