Stream Alerts

alerts.css

#alert {    
  	margin-top: 20px;
    display: inline-block;
    width: 700px;
    height: 160px;
    transform: translateX(40px);
    
}

#alert .bottom {
    width: 0px;
    height: 160px;
    position: absolute;
    background-color: rgb(228, 228, 228);
    transition: width 0.8s ease-in-out 0.1s;
    z-index: 1;
    opacity: 0.5;
    transform: skew(20deg);
}

#alert .top {
    width: 0px;
    height: 160px;
    position: absolute;
    background-color: #0070b0;
    transition: width 0.8s ease-in-out;
    z-index: 2;
    opacity: 0.8;
    overflow: hidden;
    transform: skew(20deg);
}

#alert p {
    color: white;
    margin: 0 0 0 40px;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    transform: skew(-20deg);
}

#alert .header {
    font-size: 32;
    margin-top: 20px;
}

#alert .value {
    font-size: 64;
    margin-top: 10px;
  	margin-left: 50px;
}

#alert .bottom.active {
    width: 700px;
    transition: width 0.8s ease-in-out;
}

#alert .top.active {
    width: 680px;
    transition: width 0.8s ease-in-out 0.1s;
}

alerts.html

<div id='alert'>
    <div class='bottom'></div>
    <div class='top'>
        <p class="header">New Follower:</p>
        <p class="value">{name}</p>
    </div>
</div>

alerts.js

//don't know why but the first toggle also has to be timed otherwise the anim doesnt work :(
setTimeout(() => {
  document.getElementsByClassName('top')[0].classList.toggle('active');
  document.getElementsByClassName('bottom')[0].classList.toggle('active');
  setTimeout(() => {
    document.getElementsByClassName('top')[0].classList.toggle('active');
    document.getElementsByClassName('bottom')[0].classList.toggle('active');
  }, 5000)
}, 10)