Jump to content
Search Community

use the quickSetter method inside a class

Michael31 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

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:

  1. Your tickerFunction is called before the init function (this is not very likely) or
  2. 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 :) 

  • Thanks 1
Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 4 weeks later...

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

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.

  • Like 3
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.
×
×
  • Create New...