Setting visibility to visible goes faster than setting opacity to 0.

[astanar]

hey, I'm trying to make a section disappear on click and another one show up. Setting the opacity to 0 goes smoothly but then the visibility of section2 goes super fast while I'd like it to be as slow as the first one.

 

var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");

document.addEventListener("click", function(){
var tl = new TimelineLite();
tl.add( TweenLite.to(section1, 1, {opacity:0 , ease: Power0.easeNone}) );
tl.add( TweenLite.to(section2, 1, {visibility:'visible', ease: Power0.easeNone}) );
    
});

 

my css is currently this:

 

selector {
    overflow-y: hidden;
}

#section2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    
}

 

Sorry if this seem stupid I'm new to all this.

 

thanks

[PointC]

Hi @astanar,

 

Welcome to the forum and thanks for joining Club GreenSock.

 

You can't tween visibility as it's a binary setting. (visible/hidden) There's nothing for GSAP to calculate and tween. Opacity can be animated between 0 and 1. 

 

I'd recommend the best of both worlds by using autoAlpha. That property is a combination of opacity and visibility. Once the opacity of autoAlpha tweens hits 0, the visibility property will be set to hidden.

 

More info:

https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

 

Hopefully that helps. Happy tweening.

 

[astanar]

it works! thank you very much!

[PointC]

Happy to help. Let us know if you have additional GSAP questions. Have fun.