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