misterymyra_collaboration-21

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 setList">
		<h2>{{item.id}}</h2>
		<vue-perfectlooper v-bind="item"></vue-perfectlooper>
	</div>
</div>

JavaScript

Vue.component('vue-perfectlooper', VuePerfectlooper);
let base = 'http://root.nuclearpixel.com/animation_frames/misterymyra_collaboration/';
new Vue({
	el: '#app',
	data: {
		setList: [
			{
				"id": "21-a-comp_a",
				"poster": base + "21-a-comp_a/0001.png",
				"src": base + "21-a-comp_a",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_a",
				"poster": base + "21-b-comp_a/0001.png",
				"src": base + "21-b-comp_a",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_j",
				"poster": base + "21-b-comp_j/0001.png",
				"src": base + "21-b-comp_j",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_k",
				"poster": base + "21-b-comp_k/0001.png",
				"src": base + "21-b-comp_k",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_l",
				"poster": base + "21-b-comp_l/0001.png",
				"src": base + "21-b-comp_l",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_m",
				"poster": base + "21-b-comp_m/0001.png",
				"src": base + "21-b-comp_m",
				"frames": 48,
				"suffix": ".png"
			},
			{
				"id": "21-b-comp_n",
				"poster": base + "21-b-comp_n/0001.png",
				"src": base + "21-b-comp_n",
				"frames": 48,
				"suffix": ".png"
			},
		].reverse()
	}
});