Dustin

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

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