Jump to content


Function Scope in SplitText Timeline

Recommended Posts

Hi, pretty green Greensock user here.  This is just a question of function scope inside timeline. 


I'm hoping to calculate the exact position of a single letter in my SplitText timeline so I can animate it into another phrase. Depending on size of browser window, it needs to be exact. Should the function within my timeline here return "moveLetter" value? When I console log in on the next line it's undefined. Do I need to pass value into my staggerFrom? I know I am missing something basic. Thanks for any help! 


function title() {
    var tl = new TimelineMax();
    var mySplitText = new SplitText("#title", {type:"words,chars", position: "relative", charsClass:"title-++"}),
    chars = mySplitText.chars; //an array of all the divs that wrap each character
    tl.call( function(){
        var l8 = $('.title-8')
        var coords8 = l8[0].getBoundingClientRect();
        var left8 = coords8.left;
        var moveLetter = leftUX - left8;
        return moveLetter;
    .call( function(){ console.log(moveLetter) })
    .staggerFrom(chars, 1,  {delay: 0, x: moveLetter, opacity: 0, ease:SteppedEase.easeOut}, 0.06, 0);
    return tl;


Link to comment
Share on other sites

Nevermind I think I've solved it by changing my approach and not splitting my animation into two functions. 

Link to comment
Share on other sites

Glad to hear that you solved it. Thanks for letting us know and thank you for being a member of Club GreenSock.


Happy tweening.



  • 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.