[SOLVED] Tween Opacity on Button Element

[DampedFred]

Hey!

Yesterday I’ve been exploring tweens on PlayCanvas. I’m used to tweens in Lens Studio but stumbled upon an issue when trying to use a tween to change the opacity of a button element. I can see that the update function is triggered and tried to change the opacity in the update function by adding a number to the opacity. By doing this I neglect what a tween does so thats not the good way (although it fades in of course). Can someone see where it goes wrong for me?

…
const showButtons = () => {
this.app.tween(valueOpacity).to({value: 1.0}, 1, pc.Linear).on(‘update’, function(){
//valueOpacity = valueOpacity + 0.05;
inPocketAnimation.element.opacity = valueOpacity;
console.log(valueOpacity);
}).start();
};
…

[Leonidas]

Hi @DampedFred,

If valueOpacity is a number then the tween won’t work, since numbers can’t be passed by reference. You need to use an object for that.

   var data = {
       value: 0
   };

   this.app.tween(data).to({value: 1.0}, 1, pc.Linear).on(‘update’, function(){
         inPocketAnimation.element.opacity = data.value;
   }).start();

[DampedFred]

Awesome! This works!