Reorder svelte files to match other examples.

site/content/examples/11-easing/00-easing/App.svelte

@@ -20,11 +20,16 @@
 
 	async function runAnimations() {
 		playing = true;
+
 		value.set(1000, {duration: 0});
 		time.set(0, {duration: 0});
+
 		await ease_path.set(current.shape);
-		time.set(1000, {duration, easing: x => x});
+		await Promise.all([
-		await value.set(0, {duration, easing: current.fn});
+			time.set(1000, {duration, easing: x => x}),
+			value.set(0, {duration, easing: current.fn})
+		])
+
 		playing = false;
 	}
 
@@ -32,6 +37,35 @@
 	$: current && runAnimations();
 </script>
 
+<style>
+	.easing-vis {
+		display: flex;
+		max-height: 95%;
+		max-width: 800px;
+		margin: auto;
+		padding: 10px;
+		border: 1px solid #333;
+		border-radius: 2px;
+		padding: 20px;
+	}
+
+	svg {
+		width: 100%;
+		margin: 0 20px 0 0;
+	}
+
+	.graph {
+		transform: translate(200px,400px)
+	}
+
+	@media (max-width:600px) {
+		.easing-vis {
+			flex-direction: column;
+			max-height: calc(100% - 3rem);
+		}
+	}
+</style>
+
 <div bind:offsetWidth={width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
@@ -70,33 +104,3 @@
 		on:play={runAnimations}
 	/>
 </div>
-
-<style>
-	.easing-vis {
-		display: flex;
-		justify-content: space-around;
-		max-height: 95%;
-		max-width: 800px;
-		margin: auto;
-		padding: 10px;
-		border: 1px solid #333;
-		border-radius: 2px;
-		padding: 20px;
-	}
-
-	svg {
-		width: 100%;
-		margin: 0 20px 0 0;
-	}
-
-	.graph {
-		transform: translate(200px,400px)
-	}
-
-	@media (max-width:600px) {
-		.easing-vis {
-			flex-direction: column;
-			max-height: calc(100% - 3rem);
-		}
-	}
-</style>

site/content/examples/11-easing/00-easing/Controls.svelte

@@ -12,76 +12,8 @@
   const dispatch = createEventDispatcher();
 
   $: mobile = width && width < 600
-
 </script>
 
-<div class="easing-sidebar">
-		<div class="easing-types">
-			<h3>Ease</h3>
-			{#if mobile}
-				<select bind:value={current_ease}>
-					{#each [...eases] as [name]}
-						<option
-							value={name}
-							class:selected={name === current_ease}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each [...eases] as [name]}
-						<li
-							class:selected={name === current_ease}
-							on:click={() => current_ease = name}
-						>
-							{name}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-			<h3>Type</h3>
-			{#if mobile }
-				<select bind:value={current_type}>
-					{#each types as [name, type]}
-						<option
-							value={type}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each types as [name, type]}
-						<li
-							class:selected={type === current_type}
-							on:click={() => current_type = type}
-						>
-							{name}
-					</li>
-					{/each}
-				</ul>
-			{/if}
-		</div>
-		<h4>
-			Duration
-		</h4>
-		<div class="duration">
-			<span>
-				<input type="number" bind:value={duration} min="0" step="100"/>
-				<button class="number" on:click={() => duration -= 100}>-</button>
-				<button class="number" on:click={() => duration += 100}>+</button>
-			</span>
-			<button class="play" on:click={() => dispatch('play')}>
-				{playing ? 'Restart' : 'Play'}
-			</button>
-		</div>
-
-
-	</div>
-
 <style>
   .easing-sidebar {
 		width: 11em;
@@ -187,3 +119,70 @@
 		}
 	}
 </style>
+
+<div class="easing-sidebar">
+		<div class="easing-types">
+			<h3>Ease</h3>
+			{#if mobile}
+				<select bind:value={current_ease}>
+					{#each [...eases] as [name]}
+						<option
+							value={name}
+							class:selected={name === current_ease}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each [...eases] as [name]}
+						<li
+							class:selected={name === current_ease}
+							on:click={() => current_ease = name}
+						>
+							{name}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+			<h3>Type</h3>
+			{#if mobile }
+				<select bind:value={current_type}>
+					{#each types as [name, type]}
+						<option
+							value={type}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each types as [name, type]}
+						<li
+							class:selected={type === current_type}
+							on:click={() => current_type = type}
+						>
+							{name}
+					</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+		<h4>
+			Duration
+		</h4>
+		<div class="duration">
+			<span>
+				<input type="number" bind:value={duration} min="0" step="100"/>
+				<button class="number" on:click={() => duration -= 100}>-</button>
+				<button class="number" on:click={() => duration += 100}>+</button>
+			</span>
+			<button class="play" on:click={() => dispatch('play')}>
+				{playing ? 'Restart' : 'Play'}
+			</button>
+		</div>
+
+
+	</div>

site/content/examples/11-easing/00-easing/Grid.svelte

@@ -2,6 +2,19 @@
 	export let x, y;
 </script>
 
+<style>
+	.grid-line {
+		stroke:#ccc;
+		opacity: 0.5;
+		stroke-width: 2;
+	}
+
+	.grid-line-xy {
+		stroke: tomato;
+		stroke-width: 2;
+	}
+</style>
+
 <svelte:options namespace="svg" />
 
 <rect
@@ -47,16 +60,3 @@
 	fill=none
 	stroke-width=2
 />
-
-<style>
-	.grid-line {
-		stroke:#ccc;
-		opacity: 0.5;
-		stroke-width: 2;
-	}
-
-	.grid-line-xy {
-		stroke: tomato;
-		stroke-width: 2;
-	}
-</style>