layers_of_ridges - JSFiddle

by Admiral Potato

HTML

<script src="https://unpkg.com/vue-perfectlooper"></script>
<link rel="stylesheet" href="https://admiralpotato.github.io/vue-perfectlooper/demo.css">
<div id="app" class="container">
	<div v-for="item in animationList">
		<h2>{{item.id}}</h2>
		<vue-perfectlooper v-bind="item"></vue-perfectlooper>
	</div>
</div>

JavaScript

Vue.component('vue-perfectlooper', VuePerfectlooper);
const base = 'http://root.nuclearpixel.com/animation_frames/layers_of_ridges/';
const animationNameList = 
`00-comp_a 24
01-comp_a 48
01-comp_b 48
02-comp_a 48
02-comp_b 48
02-comp_c 48
02-comp_d 48
02-comp_e 48
03-comp_a 48
03-comp_e 48
03-comp_f 48
03-comp_g 48
04-comp_a 48
04-comp_h 48
04-comp_i 48
05-comp_j 48
05-comp_a-high 48`.split('\n').reverse();
const animationList = animationNameList.map(function(animationName){
	const split = animationName.split(' ');
	const path = split[0];
	const frames = split.length > 1 ? parseInt(split[1], 10) : 48;
	return {
		"id": animationName,
		"poster": base + path + "/0001.png",
		"src": base + path,
		"frames": frames,
		"suffix": ".png",
		framerate: 24
	}
});
new Vue({
	el: '#app',
	data: {
		animationList: animationList
	}
});