[SOLVED] Tween Opacity on Button Element


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;

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;
1 Like

Awesome! This works! :grinning_face_with_smiling_eyes:

1 Like