Animated sorting list

dabblet.css

/**
 * Animated sorting list
 */

#list {
	margin: 50px auto;
	padding: 0;
	width: 200px;
}

#list li {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: sans-serif;
	list-style-type: none;
	margin: 5px 0;
	padding: 5px 10px;
}

dabblet.html

<ul id="list">
	<li data-id="1" data-title="3">First item</li>
	<li data-id="2" data-title="5">Second item</li>
	<li data-id="3" data-title="1">Third item</li>
	<li data-id="4" data-title="2">Fourth item</li>
	<li data-id="5" data-title="4">Fifth item</li>
</ul>

<button id="btn-id">Sort by ID</button>
<button id="btn-title">Sort by Title</button>

dabblet.js

var amount = 5;
var margin = 5;
var baseHeight = document.getElementById('list').offsetHeight;
var itemHeight = (baseHeight / amount) - (2 * margin);

document.getElementById('btn-id');

settings.json

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