Jump to content
GreenSock

axe-z

Cannot understand scoping ..

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm new at GSAP , but not that bad with js... I do not understand the scope here ... 

$(function(){


var rec = $('.rectangle');
var wid = $(window).width() / 2 -100;
    var tl = new TimelineMax({
      repeat: 2,
      repeatDelay: 1,
      onComplete: rev(),
      onStart: console.log('go'),
      onRepeat: console.log('end')
    });
tl.play().timeScale(2);


 console.log(tl);  //returns d {vars: Object, _totalDuration: 14, _duration: 4, _delay: 0, _timeScale: 1…}

function rev() {
   console.log(tl);   // undefined ???
   console.log(window.tl);   // undefined ???

}
 }());

//rev()  // still und.
Link to comment
Share on other sites

Hello axe-z, and Welcome to the GreenSock Forum!

 

In order to use your timeline instance you have to pass it to your onComplete callback using onCompleteParams.

 

TimelineMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

  • onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, new TimelineMax({onComplete:myFunction, onCompleteParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]
Also when passing your rev() function is inside onComplete you should remove the parenthesis () so its not run immediately.
var tl = new TimelineMax({
      repeat: 2,
      repeatDelay: 1,
      onCompleteParams: ["{self}"], // pass the timeline instance reference
      onComplete: rev, // no need to use parenthesis so it doesn't run immediately
      onStart: function() { console.log('go') }, // make anonymous function
      onRepeat: function() { console.log('end') } // make anonymous function
});

function rev(tlArg) { // make sure you pass the {self} argument .. here i use 'tlArg', you could use 'tl' if you want
     console.log(tlArg); 
     console.log(window.tlArg); 
}

If you are still having an issue please create a codepen demo example so we can see your code in context.

 

 

Thanks! :)

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