JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="menu" class="init">
    <div class="shutter"></div>
    <div class="shutter"></div>
</div>

SCSS

#menu{
    display: none;
    
    &.init{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        opacity: 1;
        transition: opacity 500ms;
    }
    
    .shutter{
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 50%;
        &:last-child{
            left: 50%;
        }
        &:before,
        &:after{
            content: '';
            display: block;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            transition: width 800ms;
            background-color: rgba(0, 0, 0, 0.9);
            width: 0;
            box-sizing: border-box;
        }
        &:after{
            left: 50%;
        }
    }
        
    &.open{
        opacity: 1;
        .shutter{
            &:after,
            &:before{
                width: 50%;
            }
        }
    }
}

JavaScript

setInterval(function(){
    var e = document.getElementById('menu');
    var c = e.className;
    if(c.match(/\s?open\s?/i)){
        e.className = c.replace(/\s?open\s?/i, ' ');
    }else{
        e.className = c + ' open';
    }
}, 3000);