GSAP onComplete overwrites "this" value

[Houseofdreams]

I'm writing a code, and from one js page I'm using this gsap:

            GSAP.to(this.shadow.material.uniforms.uAlpha, {

                duration: 1,

                delay: duration - .25,

                value: 1,

                onComplete: this.experience.world.level2.show

            })

I'm using show instead of show(), because if I use it with the brackets, ths show function allready fires, before the complete GSAP tween is done.  I've read somewhere that I needed to use the functionname without the brackets, which works, the function is actually called at the right time, but with the following problem below:

 

On the receiving javascript page, the function "show" is the following (example, not actual code)

 show() {

        console.log(this);

}

 

And "this" on the recieving page, should be a javascript Class called " Level2", like the console log example shows below

Level2 {experience: Experience, config: {…}, scene: Scene, colors: {…}, setShader: ƒ, …}

 

But when I use the onComplete function in GSAP, the console log gives me this 

Tween2 {vars: {…}, _delay: 0.75, _repeat: 0, _ts: 1, _dur: 1, …}

It just seems like the GSAP code "takes over" the "this" value completely? How is this possible and how can I fix this?

 

Kind regards

 

 

 

 

 

 

 

 

 

 

 

[Rodrigo]

Hi @Houseofdreams and welcome to the GreenSock forums!

 

You could try with an arrow function in the onComplete callback:

GSAP.to(this.shadow.material.uniforms.uAlpha, {
  duration: 1,
  delay: duration - .25,
  value: 1,
  onComplete: () => this.experience.world.level2.show(),
})

Or execute an anonymous function:

GSAP.to(this.shadow.material.uniforms.uAlpha, {
  duration: 1,
  delay: duration - .25,
  value: 1,
  onComplete: function() {
    this.experience.world.level2.show();
  },
});

Or use an arrow function when defining show method (if that is a possibility):

const show = () => {
  console.log(this);
};

Hopefully this helps. If you keep having issues, please provide a minimal demo so we can take a better look at it.

Happy Tweening!

[GreenSock]

Yes, just to be clear, it is very intentional that the scope of callbacks is set to be the animation instance itself - that's very useful in many situations. You can explicitly set the callbackScope to whatever you want (see the docs). Or just use an arrow function because in JavaScript, those always maintain the current scope. 

 

And @Rodrigo's example with an anonymous function would not work - "this" (the scope) would be the tween itself.

[Houseofdreams]

Arrow scope is indeed the solution here 

onComplete: () => {this.experience.world.level2.show() }

 

Thanks for the assistance !