Jump to content


Many Callbacks from SplitText

Recommended Posts

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?




// 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.")


Link to comment
Share on other sites

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);
  • Like 4
Link to comment
Share on other sites

Brilliant!  Thanks so much for the prompt help Dipscom ;)

  • Like 1
Link to comment
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.