Jump to content
GreenSock

Dustin

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by Dustin

  1. 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

     

     

×