[SOLVED] Scrollview Opacity

Help & Support
,
1

Hey all,

I’ve made a UI Scene changer that will tween the opacity of all elements and enable the appropriate buttons within a group of entities. It works across every 2D element in playcanvas that I have tried it on except for the scrollview. The contents of the scrollview randomly pop into place. I will attach a video of it working on everything but the scrollview. Here is the code that performs the transition:

UiSceneManager.prototype.handleOpacityAndButtons = function(whatToTween, onOrOff) {
    let self = this;
    let opacityComponents = whatToTween.findComponents("element");
    let opacityObject = {value: opacityComponents[0].opacity};
    let targetValue = 1;
    if(onOrOff === "off"){
        targetValue = 0;
        //turn the buttons off
        this.switchButtons(whatToTween, "off");
    }
    else if(onOrOff === "on"){
        opacityComponents.forEach(function(i){
            i.opacity = 0;
        });
        whatToTween.setPosition(0,0,0);
    }
    this.opacityTween = whatToTween.tween(opacityObject)
        .to({value: targetValue}, this.transitionSpeed, pc.QuadraticInOut)
        .delay(0)
        .on('update', function(){
            opacityComponents.forEach(function(i){
                    i.opacity = opacityObject.value;
            });
        })
        .on('complete', function(){
                if(onOrOff === "off"){
                    whatToTween.setPosition(-1000,0,0);
                }
                else{
                    //if its going on, turn the buttons on
                    self.switchButtons(whatToTween, "on");
                }
        })                             
        .start();
};

Does anyone have any idea why the scrollview doesn’t respond to the tween but just pops onto the screen this way? Here is a video of the undesired behavior:

Thanks in advance for any help.

2

At a guess, its probably related to the opacity of the mask for the scroll view content area. It might only render content in the mask when it has an opacity of 0 or 1 (I can’t remember which end its normally at) so it the content looks like it pops at the end of the tween.

Try not tweening the opacity of elements that are masks to see if that helps?

1 Like
3

Beautiful. That was exactly it. Thanks so much.

For future use, in the above code you would just wrap any of the opacity changes in an if statement like this:

if(i.mask != true){
   i.opacity = targetValue;
};