JSFiddle - React, Tailwind, and code Playground
HTML
<div id="test">
<div>This is a test</div>
<div class="vis">Visible</div>
</div>
SCSS
#test {
font-family: sans-serif;
white-space: nowrap;
background-color: #666;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: auto;
padding: 10px;
color: #ccc;
transition: all .5s;
overflow: hidden;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
.vis {
display: block;
}
&.h {
//right: 100%;
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-ms-transform: translate(-100%,0);
-o-transform: translate(-100%,0);
.vis {
display: none;
}
}
}
JavaScript
var t = $("#test");
window.setInterval(function() {
t.toggleClass("h");
}, 2000);