Michael31 Posted February 1, 2021 Share Posted February 1, 2021 Hello, I'm using the quickSetter method inside es6 classes. Unfortunately I have an error : elmtSet is not a function Does anyone knows how to use the quickSetter method with the this nomenclature ? I'm force to separate a function from my ticker because I plan to kill it later. Thanks init () { this.elmtSet = gsap.quickSetter(".elmt", "y", "px"); gsap.ticker.add(tickerFunction); } tickerFunction() { // some things with delta and stuffs and then : this.elmtSet(myValue); } Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 1, 2021 Share Posted February 1, 2021 Hey Michael31. Unfortunately it's impossible for us to help directly because what this is depends on how a function is called. Most likely either: Your tickerFunction is called before the init function (this is not very likely) or What this is changes between your functions. You can easily check this by logging what this is inside of both functions. As for how to fix it, I believe you'd have to share more of your code. In any case, it's not an issue with GSAP 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 1, 2021 Solution Share Posted February 1, 2021 Yep, it's a scope issue. Here's a solution: // use an arrow function which preserves scope gsap.ticker.add(() => tickerFunction()); Or you could bind() or rewrite your code not to use "this", but reference the actual object. Lots of options. But the simplest is the arrow function above. 2 1 Link to comment Share on other sites More sharing options...
Michael31 Posted February 2, 2021 Author Share Posted February 2, 2021 Thanks you guys for the amazing support ! 1 Link to comment Share on other sites More sharing options...
Michael31 Posted March 1, 2021 Author Share Posted March 1, 2021 Hi, I would like to kill my ticker now. Unfortunately, it doesn't seems to work when I reproduce the model of the arrow function that starts my ticker : // lauch my ticker, it works gsap.ticker.add(() => this.playTicker()); // remove my ticker, it doesn't work gsap.ticker.remove(() => this.playTicker()); I made a codePen to illustrate my issue : my init function lunch the ticker and my kill function is supposed to remove it. You can see my ticker is still running after I called the kill method. See the Pen qBqogBy by michaelgrc (@michaelgrc) on CodePen Does anyone see what I'm missing ? Thank you very much Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 5 hours ago, Michael31 said: // lauch my ticker, it works gsap.ticker.add(() => this.playTicker()); // remove my ticker, it doesn't work gsap.ticker.remove(() => this.playTicker()); This is because you're using anonymous functions. You have to use a named function if you want to kill it later (or else it will try to kill a function that it just created). So it should be something like: gsap.ticker.add(this.playTicker); gsap.ticker.remove(this.playTicker); But then you need to fix the this scope problem inside of playTicker. One way to do that would be to bind a function with the correct scope to the class: See the Pen mdOxNYo?editors=0010 by GreenSock (@GreenSock) on CodePen Another option is to not use classes. 3 Link to comment Share on other sites More sharing options...
Michael31 Posted March 1, 2021 Author Share Posted March 1, 2021 That makes sense indeed. Once again thanks for the explanations ! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now