[Gsap click toggle hide show, two different tweens on same element]

Perfect. Thank you very much Sahil. Very informative, It didn't even occur to me that the block was covering the button.

[Gsap click toggle hide show, two different tweens on same element]

html

<button class="btn">Show / Hide</button>
<br><br>
<div class="box"></div>

css

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0;
}

javascript

const btn = document.querySelector('.btn');
const box = document.querySelector('.box');

const showBox = new TimelineMax({paused: true});
//alias for brevity 
const sb = showBox;

const hb = new TimelineMax({paused: true}); //hidebox

btn.addEventListener('click', function(){
	if(box.classList.contains('active') !== true) {
      sb.play();
    	sb.set(box, {opacity: 0, y: 0});
    	sb.fromTo(box, 0.5, {opacity: 0, y: 0}, {opacity: 1, y: 0});
        box.classList.add('active');
    }
    else if(box.classList.contains('active')) {
      hb.play();
    	hb.fromTo(box, 0.5, {opacity: 1, y: 0}, {opacity: 0, y: -100});
        box.classList.remove('active');
    }
});

 

New to the forum. I am looking to be able to show an element with one tweened animation and hide with a different animation by clicking the same button. In this case the show is a fade in and the hide is a fade out with a vertical translate. I tried by toggling the .active class and conditionally show or hide based on whether box has the class or not. I have only got it to work once (toggle on off for two clicks) and then it stops. Can someone tell me where i'm going wrong. I want to be able to keep this vanilla js, thanks.

 

demo