The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
html,body {
	padding: 0;
	margin: 0;
}
.panel {
	transform: translateX(-100%);
	transition: transform 0.3s ease-out; 
}
.panel {
	width:300px;
	height: 100%;
	position: fixed;
	background-color: gold;
}
.panel.active {
	transition: transform 0.3s ease-in;
	transform: translateX(0);
}

.overlayout {
	top: 0;
	left: 300px;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: pink;
}
.overlayout {
	transition: transform 0.3s ease-out;
	transform: translateX(100%);
}
.overlayout.active {
	transition: transform 0.3s ease-in;
	transform: translateX(0);
}

dabblet.html

<div class="panel active" id="panel">
<p>abc</p>
<button id="out">Out</button>
</div>

<div class="overlayout" id="overlayout">
	<p>def</p>
	<button id="outRight"></button>
</div>

<button id="pop">Pop</button>
<button id="popRight">Pop Def</button>




<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />


<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />

dabblet.js

var pop = document.getElementById('pop');
var popRight = document.getElementById('popRight');
var out = document.getElementById('out');
var outRight = document.getElementById('outRight');
var panel = document.getElementById('panel');
var panelRight = document.getElementById('overlayout');

pop.onclick = function() {
	panel.classList.add('active');
}
out.onclick = function() { 
	panel.classList.remove('active');
}
popRight.onclick = function() {
	panelRight.classList.add('active');
}
outRight.onclick = function() {
	panelRight.classList.remove('active');
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}