From efcd294731cf1f67d7acddc31116b87fc6faa4cb Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Fri, 26 Jul 2019 20:22:24 +0100
Subject: [PATCH] Site: Document svelte/easing (#3292)

---
 site/content/docs/03-run-time.md              |  18 +-
 .../examples/11-easing/00-easing/App.svelte   | 106 ++++++++++
 .../11-easing/00-easing/Controls.svelte       | 186 ++++++++++++++++++
 .../examples/11-easing/00-easing/Grid.svelte  |  62 ++++++
 .../examples/11-easing/00-easing/eases.js     |  43 ++++
 .../examples/11-easing/00-easing/meta.json    |   3 +
 site/content/examples/11-easing/meta.json     |   3 +
 .../{11-svg => 12-svg}/01-clock/App.svelte    |   0
 .../{11-svg => 12-svg}/01-clock/meta.json     |   0
 .../02-bar-chart/App.svelte                   |   0
 .../{11-svg => 12-svg}/02-bar-chart/meta.json |   0
 .../03-area-chart/App.svelte                  |   0
 .../{11-svg => 12-svg}/03-area-chart/data.js  |   0
 .../03-area-chart/meta.json                   |   0
 .../04-scatterplot/App.svelte                 |   0
 .../04-scatterplot/Scatterplot.svelte         |   0
 .../{11-svg => 12-svg}/04-scatterplot/data.js |   0
 .../04-scatterplot/meta.json                  |   0
 .../05-svg-transitions/App.svelte             |   0
 .../05-svg-transitions/custom-transitions.js  |   0
 .../05-svg-transitions/meta.json              |   0
 .../05-svg-transitions/shape.js               |   0
 .../examples/{11-svg => 12-svg}/meta.json     |   0
 .../00-actions/App.svelte                     |   0
 .../00-actions/meta.json                      |   0
 .../00-actions/pannable.js                    |   0
 .../App.svelte                                |   0
 .../01-adding-parameters-to-actions/meta.json |   0
 .../{12-actions => 13-actions}/meta.json      |   0
 .../00-classes/App.svelte                     |   0
 .../00-classes/meta.json                      |   0
 .../01-class-shorthand/App.svelte             |   0
 .../01-class-shorthand/meta.json              |   0
 .../{13-classes => 14-classes}/meta.json      |   0
 .../00-slots/App.svelte                       |   0
 .../00-slots/Box.svelte                       |   0
 .../00-slots/meta.json                        |   0
 .../01-slot-fallbacks/App.svelte              |   0
 .../01-slot-fallbacks/Box.svelte              |   0
 .../01-slot-fallbacks/meta.json               |   0
 .../02-named-slots/App.svelte                 |   0
 .../02-named-slots/ContactCard.svelte         |   0
 .../02-named-slots/meta.json                  |   0
 .../03-slot-props/App.svelte                  |   0
 .../03-slot-props/Hoverable.svelte            |   0
 .../03-slot-props/meta.json                   |   0
 .../04-modal/App.svelte                       |   0
 .../04-modal/Modal.svelte                     |   0
 .../04-modal/meta.json                        |   0
 .../meta.json                                 |   0
 .../00-context-api/App.svelte                 |   0
 .../00-context-api/Map.svelte                 |   0
 .../00-context-api/MapMarker.svelte           |   0
 .../00-context-api/mapbox.js                  |   0
 .../00-context-api/meta.json                  |   0
 .../{15-context => 16-context}/meta.json      |   0
 .../00-svelte-self/App.svelte                 |   0
 .../00-svelte-self/File.svelte                |   0
 .../00-svelte-self/Folder.svelte              |   0
 .../00-svelte-self/meta.json                  |   0
 .../01-svelte-component/App.svelte            |   0
 .../01-svelte-component/BlueThing.svelte      |   0
 .../01-svelte-component/GreenThing.svelte     |   0
 .../01-svelte-component/RedThing.svelte       |   0
 .../01-svelte-component/meta.json             |   0
 .../02-svelte-window/App.svelte               |   0
 .../02-svelte-window/meta.json                |   0
 .../03-svelte-window-bindings/App.svelte      |   0
 .../03-svelte-window-bindings/meta.json       |   0
 .../04-svelte-body/App.svelte                 |   0
 .../04-svelte-body/meta.json                  |   0
 .../05-svelte-head/App.svelte                 |   0
 .../05-svelte-head/meta.json                  |   0
 .../meta.json                                 |   0
 .../01-module-exports/App.svelte              |   0
 .../01-module-exports/AudioPlayer.svelte      |   0
 .../01-module-exports/meta.json               |   0
 .../meta.json                                 |   0
 .../00-debug/App.svelte                       |   0
 .../00-debug/meta.json                        |   0
 .../{18-debugging => 19-debugging}/meta.json  |   0
 .../01-7guis-counter/App.svelte               |   0
 .../01-7guis-counter/meta.json                |   0
 .../02-7guis-temperature/App.svelte           |   0
 .../02-7guis-temperature/meta.json            |   0
 .../03-7guis-flight-booker/App.svelte         |   0
 .../03-7guis-flight-booker/meta.json          |   0
 .../04-7guis-timer/App.svelte                 |   0
 .../04-7guis-timer/meta.json                  |   0
 .../05-7guis-crud/App.svelte                  |   0
 .../05-7guis-crud/meta.json                   |   0
 .../06-7guis-circles/App.svelte               |   0
 .../06-7guis-circles/meta.json                |   0
 .../examples/{19-7guis => 20-7guis}/meta.json |   0
 .../01-hacker-news/App.svelte                 |   0
 .../01-hacker-news/Comment.svelte             |   0
 .../01-hacker-news/Item.svelte                |   0
 .../01-hacker-news/List.svelte                |   0
 .../01-hacker-news/Summary.svelte             |   0
 .../01-hacker-news/meta.json                  |   0
 .../02-immutable-data/App.svelte              |   0
 .../02-immutable-data/ImmutableTodo.svelte    |   0
 .../02-immutable-data/MutableTodo.svelte      |   0
 .../02-immutable-data/flash.js                |   0
 .../02-immutable-data/meta.json               |   0
 .../meta.json                                 |   0
 site/static/examples/thumbnails/easing.jpg    | Bin 0 -> 4461 bytes
 107 files changed, 420 insertions(+), 1 deletion(-)
 create mode 100644 site/content/examples/11-easing/00-easing/App.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/Controls.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/Grid.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/eases.js
 create mode 100644 site/content/examples/11-easing/00-easing/meta.json
 create mode 100644 site/content/examples/11-easing/meta.json
 rename site/content/examples/{11-svg => 12-svg}/01-clock/App.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/01-clock/meta.json (100%)
 rename site/content/examples/{11-svg => 12-svg}/02-bar-chart/App.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/02-bar-chart/meta.json (100%)
 rename site/content/examples/{11-svg => 12-svg}/03-area-chart/App.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/03-area-chart/data.js (100%)
 rename site/content/examples/{11-svg => 12-svg}/03-area-chart/meta.json (100%)
 rename site/content/examples/{11-svg => 12-svg}/04-scatterplot/App.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/04-scatterplot/Scatterplot.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/04-scatterplot/data.js (100%)
 rename site/content/examples/{11-svg => 12-svg}/04-scatterplot/meta.json (100%)
 rename site/content/examples/{11-svg => 12-svg}/05-svg-transitions/App.svelte (100%)
 rename site/content/examples/{11-svg => 12-svg}/05-svg-transitions/custom-transitions.js (100%)
 rename site/content/examples/{11-svg => 12-svg}/05-svg-transitions/meta.json (100%)
 rename site/content/examples/{11-svg => 12-svg}/05-svg-transitions/shape.js (100%)
 rename site/content/examples/{11-svg => 12-svg}/meta.json (100%)
 rename site/content/examples/{12-actions => 13-actions}/00-actions/App.svelte (100%)
 rename site/content/examples/{12-actions => 13-actions}/00-actions/meta.json (100%)
 rename site/content/examples/{12-actions => 13-actions}/00-actions/pannable.js (100%)
 rename site/content/examples/{12-actions => 13-actions}/01-adding-parameters-to-actions/App.svelte (100%)
 rename site/content/examples/{12-actions => 13-actions}/01-adding-parameters-to-actions/meta.json (100%)
 rename site/content/examples/{12-actions => 13-actions}/meta.json (100%)
 rename site/content/examples/{13-classes => 14-classes}/00-classes/App.svelte (100%)
 rename site/content/examples/{13-classes => 14-classes}/00-classes/meta.json (100%)
 rename site/content/examples/{13-classes => 14-classes}/01-class-shorthand/App.svelte (100%)
 rename site/content/examples/{13-classes => 14-classes}/01-class-shorthand/meta.json (100%)
 rename site/content/examples/{13-classes => 14-classes}/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/00-slots/App.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/00-slots/Box.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/00-slots/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/01-slot-fallbacks/App.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/01-slot-fallbacks/Box.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/01-slot-fallbacks/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/02-named-slots/App.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/02-named-slots/ContactCard.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/02-named-slots/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/03-slot-props/App.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/03-slot-props/Hoverable.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/03-slot-props/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/04-modal/App.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/04-modal/Modal.svelte (100%)
 rename site/content/examples/{14-composition => 15-composition}/04-modal/meta.json (100%)
 rename site/content/examples/{14-composition => 15-composition}/meta.json (100%)
 rename site/content/examples/{15-context => 16-context}/00-context-api/App.svelte (100%)
 rename site/content/examples/{15-context => 16-context}/00-context-api/Map.svelte (100%)
 rename site/content/examples/{15-context => 16-context}/00-context-api/MapMarker.svelte (100%)
 rename site/content/examples/{15-context => 16-context}/00-context-api/mapbox.js (100%)
 rename site/content/examples/{15-context => 16-context}/00-context-api/meta.json (100%)
 rename site/content/examples/{15-context => 16-context}/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/00-svelte-self/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/00-svelte-self/File.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/00-svelte-self/Folder.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/00-svelte-self/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/01-svelte-component/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/01-svelte-component/BlueThing.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/01-svelte-component/GreenThing.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/01-svelte-component/RedThing.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/01-svelte-component/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/02-svelte-window/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/02-svelte-window/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/03-svelte-window-bindings/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/03-svelte-window-bindings/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/04-svelte-body/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/04-svelte-body/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/05-svelte-head/App.svelte (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/05-svelte-head/meta.json (100%)
 rename site/content/examples/{16-special-elements => 17-special-elements}/meta.json (100%)
 rename site/content/examples/{17-module-context => 18-module-context}/01-module-exports/App.svelte (100%)
 rename site/content/examples/{17-module-context => 18-module-context}/01-module-exports/AudioPlayer.svelte (100%)
 rename site/content/examples/{17-module-context => 18-module-context}/01-module-exports/meta.json (100%)
 rename site/content/examples/{17-module-context => 18-module-context}/meta.json (100%)
 rename site/content/examples/{18-debugging => 19-debugging}/00-debug/App.svelte (100%)
 rename site/content/examples/{18-debugging => 19-debugging}/00-debug/meta.json (100%)
 rename site/content/examples/{18-debugging => 19-debugging}/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/01-7guis-counter/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/01-7guis-counter/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/02-7guis-temperature/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/02-7guis-temperature/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/03-7guis-flight-booker/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/03-7guis-flight-booker/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/04-7guis-timer/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/04-7guis-timer/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/05-7guis-crud/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/05-7guis-crud/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/06-7guis-circles/App.svelte (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/06-7guis-circles/meta.json (100%)
 rename site/content/examples/{19-7guis => 20-7guis}/meta.json (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/App.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/Comment.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/Item.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/List.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/Summary.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/01-hacker-news/meta.json (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/02-immutable-data/App.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/02-immutable-data/ImmutableTodo.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/02-immutable-data/MutableTodo.svelte (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/02-immutable-data/flash.js (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/02-immutable-data/meta.json (100%)
 rename site/content/examples/{20-miscellaneous => 21-miscellaneous}/meta.json (100%)
 create mode 100644 site/static/examples/thumbnails/easing.jpg

diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 6d5777aacd..dfd734b3c9 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -740,7 +740,23 @@ You can see a full example on the [animations tutorial](tutorial/animate)
 
 ### `svelte/easing`
 
-* TODO could have nice little interactive widgets showing the different functions, maybe
+Easing functions specificy the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
+
+You can explore the various eases using the [ease visualiser](examples#easing) in the [examples section](examples).
+
+
+| ease | in | out | inOut |
+| --- | --- | --- | --- |
+| **back** | `backIn` | `backOut` | `backInOut` |
+| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
+| **circ** | `circIn` | `circOut` | `circInOut` |
+| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
+| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
+| **expo** | `expoIn` | `expoOut` | `expoInOut` |
+| **quad** | `quadIn` | `quadOut` | `quadInOut` |
+| **quart** | `quartIn` | `quartOut` | `quartInOut` |
+| **quint** | `quintIn` | `quintOut` | `quintInOut` |
+| **sine** | `sineIn` | `sineOut` | `sineInOut` |
 
 
 ### `svelte/register`
diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte
new file mode 100644
index 0000000000..c33e73518e
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/App.svelte
@@ -0,0 +1,106 @@
+<script>
+	import { interpolateString as interpolate } from 'd3-interpolate';
+	import { tweened } from 'svelte/motion';
+
+	import Grid from './Grid.svelte';
+	import Controls from './Controls.svelte';
+
+	import { eases, types } from './eases.js';
+
+	let current_type = 'In';
+	let current_ease = 'sine';
+	let duration = 2000;
+	let current = eases.get(current_ease)[current_type];
+	let playing = false;
+	let width;
+
+	const ease_path = tweened(current.shape, { interpolate });
+	const time = tweened(0);
+	const value = tweened(1000);
+
+	async function runAnimations() {
+		playing = true;
+
+		value.set(1000, {duration: 0});
+		time.set(0, {duration: 0});
+
+		await ease_path.set(current.shape);
+		await Promise.all([
+			time.set(1000, {duration, easing: x => x}),
+			value.set(0, {duration, easing: current.fn})
+		]);
+
+		playing = false;
+	}
+
+	$: current = eases.get(current_ease)[current_type];
+	$: 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">
+			<Grid x={$time} y={$value}/>
+			<g class="graph">
+				<path
+					d={$ease_path}
+					stroke="#333"
+					stroke-width="2"
+					fill="none"
+				/>
+
+				<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
+					fill="#ff3e00"
+					style="transform: translate(1060px, {($value - 24)}px)"
+				/>
+
+				<circle
+					cx="{$time}"
+					cy="{$value}"
+					r="15"
+					fill="#ff3e00"
+				/>
+			</g>
+		</g>
+	</svg>
+
+	<Controls
+		{eases}
+		{types}
+		{playing}
+		{width}
+		bind:duration
+		bind:current_ease
+		bind:current_type
+		on:play={runAnimations}
+	/>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte
new file mode 100644
index 0000000000..66a297323f
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/Controls.svelte
@@ -0,0 +1,186 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let current_ease;
+	export let current_type;
+	export let eases;
+	export let types;
+	export let duration;
+	export let playing;
+	export let width;
+
+	const dispatch = createEventDispatcher();
+
+	$: mobile = width && width < 600;
+</script>
+
+<style>
+	.easing-sidebar {
+		width: 11em;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		font-size: 18px;
+	}
+
+	li {
+		padding: 5px 10px;
+		background: #eee;
+		border-radius: 2px;
+		margin: 3px 0;
+		cursor:pointer;
+	}
+
+	li:hover {
+		background: #676778;
+		color: white;
+	}
+
+	.selected {
+		background: #ff3e00;
+		color: white;
+	}
+
+	h3 {
+		margin: 0 10px 0 0;
+	}
+
+	h4 {
+		margin-bottom: 0;
+	}
+
+	select {
+		display: inline;
+		padding: 0.2em;
+		margin: 0;
+	}
+
+	.duration {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.duration span {
+		display: flex;
+	}
+
+	.duration input {
+		width: 80px;
+		margin: 10px 10px 10px 0 ;
+	}
+
+	.duration button {
+		margin: 10px 5px;
+	}
+
+	.duration .number {
+		width: 30px;
+	}
+
+	.duration .play {
+		margin: 0 5px 0 auto;
+		width: 100%;
+	}
+
+	@media (max-width:600px) {
+		.easing-types {
+			display: flex;
+			align-items: center;
+			margin-top: 10px;
+		}
+
+		.easing-sidebar {
+			width: 100%;
+		}
+
+		.duration .play {
+			margin-left: auto;
+			width: unset;
+		}
+
+		h3 {
+			font-size: 0.9em;
+			display: inline;
+		}
+
+		h3:nth-of-type(2) {
+			margin-left: auto;
+		}
+
+		ul li {
+			margin-right: 10px;
+		}
+	}
+</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>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte
new file mode 100644
index 0000000000..e704f46cf7
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/Grid.svelte
@@ -0,0 +1,62 @@
+<script>
+	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
+	x=0
+	y=0
+	width=1400
+	height=1800
+	stroke=#ccc
+	style="opacity: 0.5"
+	fill=none
+	stroke-width=2
+/>
+
+{#each { length: 8 } as _, i}
+	{#if i < 6}
+		<path
+			d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
+			class="grid-line"
+		/>
+	{/if}
+	<path
+		d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
+		class="grid-line"
+	/>
+{/each}
+
+<path
+	style="transform: translateX({x+200}px)"
+	d="M0 0 L0 1800"
+	class="grid-line-xy"
+/>
+<path
+	style="transform: translateY({y}px)"
+	d="M0 400 L1400 400"
+	class="grid-line-xy"
+/>
+<rect
+	x=200
+	y=400
+	width=1000
+	height=1000
+	stroke=#999
+	fill=none
+	stroke-width=2
+/>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/eases.js b/site/content/examples/11-easing/00-easing/eases.js
new file mode 100644
index 0000000000..a24246005a
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/eases.js
@@ -0,0 +1,43 @@
+import * as eases from 'svelte/easing';
+
+const processed_eases = {};
+
+for (const ease in eases) {
+	if (ease === "linear") {
+		processed_eases.linear = eases.linear;
+	} else {
+		const name = ease.replace(/In$|InOut$|Out$/, '');
+		const type = ease.match(/In$|InOut$|Out$/)[0];
+
+		if (!(name in processed_eases)) processed_eases[name] = {};
+		processed_eases[name][type] = {};
+		processed_eases[name][type].fn = eases[ease];
+
+		let shape = 'M0 1000';
+		for (let i = 1; i <= 1000; i++) {
+			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
+			processed_eases[name][type].shape = shape;
+		}
+	}
+}
+
+const sorted_eases = new Map([
+	['sine', processed_eases.sine],
+	['quad', processed_eases.quad],
+	['cubic', processed_eases.cubic],
+	['quart', processed_eases.quart],
+	['quint', processed_eases.quint],
+	['expo', processed_eases.expo],
+	['circ', processed_eases.circ],
+	['back', processed_eases.back],
+	['elastic', processed_eases.elastic],
+	['bounce', processed_eases.bounce],
+]);
+
+export const types = [
+	['Ease In', 'In'],
+	['Ease Out', 'Out'],
+	['Ease In Out', 'InOut']
+];
+
+export { sorted_eases as eases };
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/meta.json b/site/content/examples/11-easing/00-easing/meta.json
new file mode 100644
index 0000000000..59ad604b26
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Ease Visualiser"
+}
\ No newline at end of file
diff --git a/site/content/examples/11-easing/meta.json b/site/content/examples/11-easing/meta.json
new file mode 100644
index 0000000000..78341a522d
--- /dev/null
+++ b/site/content/examples/11-easing/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Easing"
+}
\ No newline at end of file
diff --git a/site/content/examples/11-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte
similarity index 100%
rename from site/content/examples/11-svg/01-clock/App.svelte
rename to site/content/examples/12-svg/01-clock/App.svelte
diff --git a/site/content/examples/11-svg/01-clock/meta.json b/site/content/examples/12-svg/01-clock/meta.json
similarity index 100%
rename from site/content/examples/11-svg/01-clock/meta.json
rename to site/content/examples/12-svg/01-clock/meta.json
diff --git a/site/content/examples/11-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte
similarity index 100%
rename from site/content/examples/11-svg/02-bar-chart/App.svelte
rename to site/content/examples/12-svg/02-bar-chart/App.svelte
diff --git a/site/content/examples/11-svg/02-bar-chart/meta.json b/site/content/examples/12-svg/02-bar-chart/meta.json
similarity index 100%
rename from site/content/examples/11-svg/02-bar-chart/meta.json
rename to site/content/examples/12-svg/02-bar-chart/meta.json
diff --git a/site/content/examples/11-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte
similarity index 100%
rename from site/content/examples/11-svg/03-area-chart/App.svelte
rename to site/content/examples/12-svg/03-area-chart/App.svelte
diff --git a/site/content/examples/11-svg/03-area-chart/data.js b/site/content/examples/12-svg/03-area-chart/data.js
similarity index 100%
rename from site/content/examples/11-svg/03-area-chart/data.js
rename to site/content/examples/12-svg/03-area-chart/data.js
diff --git a/site/content/examples/11-svg/03-area-chart/meta.json b/site/content/examples/12-svg/03-area-chart/meta.json
similarity index 100%
rename from site/content/examples/11-svg/03-area-chart/meta.json
rename to site/content/examples/12-svg/03-area-chart/meta.json
diff --git a/site/content/examples/11-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte
similarity index 100%
rename from site/content/examples/11-svg/04-scatterplot/App.svelte
rename to site/content/examples/12-svg/04-scatterplot/App.svelte
diff --git a/site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
similarity index 100%
rename from site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte
rename to site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
diff --git a/site/content/examples/11-svg/04-scatterplot/data.js b/site/content/examples/12-svg/04-scatterplot/data.js
similarity index 100%
rename from site/content/examples/11-svg/04-scatterplot/data.js
rename to site/content/examples/12-svg/04-scatterplot/data.js
diff --git a/site/content/examples/11-svg/04-scatterplot/meta.json b/site/content/examples/12-svg/04-scatterplot/meta.json
similarity index 100%
rename from site/content/examples/11-svg/04-scatterplot/meta.json
rename to site/content/examples/12-svg/04-scatterplot/meta.json
diff --git a/site/content/examples/11-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte
similarity index 100%
rename from site/content/examples/11-svg/05-svg-transitions/App.svelte
rename to site/content/examples/12-svg/05-svg-transitions/App.svelte
diff --git a/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js b/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
similarity index 100%
rename from site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
rename to site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
diff --git a/site/content/examples/11-svg/05-svg-transitions/meta.json b/site/content/examples/12-svg/05-svg-transitions/meta.json
similarity index 100%
rename from site/content/examples/11-svg/05-svg-transitions/meta.json
rename to site/content/examples/12-svg/05-svg-transitions/meta.json
diff --git a/site/content/examples/11-svg/05-svg-transitions/shape.js b/site/content/examples/12-svg/05-svg-transitions/shape.js
similarity index 100%
rename from site/content/examples/11-svg/05-svg-transitions/shape.js
rename to site/content/examples/12-svg/05-svg-transitions/shape.js
diff --git a/site/content/examples/11-svg/meta.json b/site/content/examples/12-svg/meta.json
similarity index 100%
rename from site/content/examples/11-svg/meta.json
rename to site/content/examples/12-svg/meta.json
diff --git a/site/content/examples/12-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
similarity index 100%
rename from site/content/examples/12-actions/00-actions/App.svelte
rename to site/content/examples/13-actions/00-actions/App.svelte
diff --git a/site/content/examples/12-actions/00-actions/meta.json b/site/content/examples/13-actions/00-actions/meta.json
similarity index 100%
rename from site/content/examples/12-actions/00-actions/meta.json
rename to site/content/examples/13-actions/00-actions/meta.json
diff --git a/site/content/examples/12-actions/00-actions/pannable.js b/site/content/examples/13-actions/00-actions/pannable.js
similarity index 100%
rename from site/content/examples/12-actions/00-actions/pannable.js
rename to site/content/examples/13-actions/00-actions/pannable.js
diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
similarity index 100%
rename from site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte
rename to site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json b/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json
similarity index 100%
rename from site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json
rename to site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json
diff --git a/site/content/examples/12-actions/meta.json b/site/content/examples/13-actions/meta.json
similarity index 100%
rename from site/content/examples/12-actions/meta.json
rename to site/content/examples/13-actions/meta.json
diff --git a/site/content/examples/13-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte
similarity index 100%
rename from site/content/examples/13-classes/00-classes/App.svelte
rename to site/content/examples/14-classes/00-classes/App.svelte
diff --git a/site/content/examples/13-classes/00-classes/meta.json b/site/content/examples/14-classes/00-classes/meta.json
similarity index 100%
rename from site/content/examples/13-classes/00-classes/meta.json
rename to site/content/examples/14-classes/00-classes/meta.json
diff --git a/site/content/examples/13-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte
similarity index 100%
rename from site/content/examples/13-classes/01-class-shorthand/App.svelte
rename to site/content/examples/14-classes/01-class-shorthand/App.svelte
diff --git a/site/content/examples/13-classes/01-class-shorthand/meta.json b/site/content/examples/14-classes/01-class-shorthand/meta.json
similarity index 100%
rename from site/content/examples/13-classes/01-class-shorthand/meta.json
rename to site/content/examples/14-classes/01-class-shorthand/meta.json
diff --git a/site/content/examples/13-classes/meta.json b/site/content/examples/14-classes/meta.json
similarity index 100%
rename from site/content/examples/13-classes/meta.json
rename to site/content/examples/14-classes/meta.json
diff --git a/site/content/examples/14-composition/00-slots/App.svelte b/site/content/examples/15-composition/00-slots/App.svelte
similarity index 100%
rename from site/content/examples/14-composition/00-slots/App.svelte
rename to site/content/examples/15-composition/00-slots/App.svelte
diff --git a/site/content/examples/14-composition/00-slots/Box.svelte b/site/content/examples/15-composition/00-slots/Box.svelte
similarity index 100%
rename from site/content/examples/14-composition/00-slots/Box.svelte
rename to site/content/examples/15-composition/00-slots/Box.svelte
diff --git a/site/content/examples/14-composition/00-slots/meta.json b/site/content/examples/15-composition/00-slots/meta.json
similarity index 100%
rename from site/content/examples/14-composition/00-slots/meta.json
rename to site/content/examples/15-composition/00-slots/meta.json
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/App.svelte b/site/content/examples/15-composition/01-slot-fallbacks/App.svelte
similarity index 100%
rename from site/content/examples/14-composition/01-slot-fallbacks/App.svelte
rename to site/content/examples/15-composition/01-slot-fallbacks/App.svelte
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
similarity index 100%
rename from site/content/examples/14-composition/01-slot-fallbacks/Box.svelte
rename to site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/meta.json b/site/content/examples/15-composition/01-slot-fallbacks/meta.json
similarity index 100%
rename from site/content/examples/14-composition/01-slot-fallbacks/meta.json
rename to site/content/examples/15-composition/01-slot-fallbacks/meta.json
diff --git a/site/content/examples/14-composition/02-named-slots/App.svelte b/site/content/examples/15-composition/02-named-slots/App.svelte
similarity index 100%
rename from site/content/examples/14-composition/02-named-slots/App.svelte
rename to site/content/examples/15-composition/02-named-slots/App.svelte
diff --git a/site/content/examples/14-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
similarity index 100%
rename from site/content/examples/14-composition/02-named-slots/ContactCard.svelte
rename to site/content/examples/15-composition/02-named-slots/ContactCard.svelte
diff --git a/site/content/examples/14-composition/02-named-slots/meta.json b/site/content/examples/15-composition/02-named-slots/meta.json
similarity index 100%
rename from site/content/examples/14-composition/02-named-slots/meta.json
rename to site/content/examples/15-composition/02-named-slots/meta.json
diff --git a/site/content/examples/14-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte
similarity index 100%
rename from site/content/examples/14-composition/03-slot-props/App.svelte
rename to site/content/examples/15-composition/03-slot-props/App.svelte
diff --git a/site/content/examples/14-composition/03-slot-props/Hoverable.svelte b/site/content/examples/15-composition/03-slot-props/Hoverable.svelte
similarity index 100%
rename from site/content/examples/14-composition/03-slot-props/Hoverable.svelte
rename to site/content/examples/15-composition/03-slot-props/Hoverable.svelte
diff --git a/site/content/examples/14-composition/03-slot-props/meta.json b/site/content/examples/15-composition/03-slot-props/meta.json
similarity index 100%
rename from site/content/examples/14-composition/03-slot-props/meta.json
rename to site/content/examples/15-composition/03-slot-props/meta.json
diff --git a/site/content/examples/14-composition/04-modal/App.svelte b/site/content/examples/15-composition/04-modal/App.svelte
similarity index 100%
rename from site/content/examples/14-composition/04-modal/App.svelte
rename to site/content/examples/15-composition/04-modal/App.svelte
diff --git a/site/content/examples/14-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/04-modal/Modal.svelte
similarity index 100%
rename from site/content/examples/14-composition/04-modal/Modal.svelte
rename to site/content/examples/15-composition/04-modal/Modal.svelte
diff --git a/site/content/examples/14-composition/04-modal/meta.json b/site/content/examples/15-composition/04-modal/meta.json
similarity index 100%
rename from site/content/examples/14-composition/04-modal/meta.json
rename to site/content/examples/15-composition/04-modal/meta.json
diff --git a/site/content/examples/14-composition/meta.json b/site/content/examples/15-composition/meta.json
similarity index 100%
rename from site/content/examples/14-composition/meta.json
rename to site/content/examples/15-composition/meta.json
diff --git a/site/content/examples/15-context/00-context-api/App.svelte b/site/content/examples/16-context/00-context-api/App.svelte
similarity index 100%
rename from site/content/examples/15-context/00-context-api/App.svelte
rename to site/content/examples/16-context/00-context-api/App.svelte
diff --git a/site/content/examples/15-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte
similarity index 100%
rename from site/content/examples/15-context/00-context-api/Map.svelte
rename to site/content/examples/16-context/00-context-api/Map.svelte
diff --git a/site/content/examples/15-context/00-context-api/MapMarker.svelte b/site/content/examples/16-context/00-context-api/MapMarker.svelte
similarity index 100%
rename from site/content/examples/15-context/00-context-api/MapMarker.svelte
rename to site/content/examples/16-context/00-context-api/MapMarker.svelte
diff --git a/site/content/examples/15-context/00-context-api/mapbox.js b/site/content/examples/16-context/00-context-api/mapbox.js
similarity index 100%
rename from site/content/examples/15-context/00-context-api/mapbox.js
rename to site/content/examples/16-context/00-context-api/mapbox.js
diff --git a/site/content/examples/15-context/00-context-api/meta.json b/site/content/examples/16-context/00-context-api/meta.json
similarity index 100%
rename from site/content/examples/15-context/00-context-api/meta.json
rename to site/content/examples/16-context/00-context-api/meta.json
diff --git a/site/content/examples/15-context/meta.json b/site/content/examples/16-context/meta.json
similarity index 100%
rename from site/content/examples/15-context/meta.json
rename to site/content/examples/16-context/meta.json
diff --git a/site/content/examples/16-special-elements/00-svelte-self/App.svelte b/site/content/examples/17-special-elements/00-svelte-self/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/00-svelte-self/App.svelte
rename to site/content/examples/17-special-elements/00-svelte-self/App.svelte
diff --git a/site/content/examples/16-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/00-svelte-self/File.svelte
rename to site/content/examples/17-special-elements/00-svelte-self/File.svelte
diff --git a/site/content/examples/16-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/00-svelte-self/Folder.svelte
rename to site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
diff --git a/site/content/examples/16-special-elements/00-svelte-self/meta.json b/site/content/examples/17-special-elements/00-svelte-self/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/00-svelte-self/meta.json
rename to site/content/examples/17-special-elements/00-svelte-self/meta.json
diff --git a/site/content/examples/16-special-elements/01-svelte-component/App.svelte b/site/content/examples/17-special-elements/01-svelte-component/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/01-svelte-component/App.svelte
rename to site/content/examples/17-special-elements/01-svelte-component/App.svelte
diff --git a/site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte
rename to site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
diff --git a/site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte
rename to site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
diff --git a/site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte
rename to site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
diff --git a/site/content/examples/16-special-elements/01-svelte-component/meta.json b/site/content/examples/17-special-elements/01-svelte-component/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/01-svelte-component/meta.json
rename to site/content/examples/17-special-elements/01-svelte-component/meta.json
diff --git a/site/content/examples/16-special-elements/02-svelte-window/App.svelte b/site/content/examples/17-special-elements/02-svelte-window/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/02-svelte-window/App.svelte
rename to site/content/examples/17-special-elements/02-svelte-window/App.svelte
diff --git a/site/content/examples/16-special-elements/02-svelte-window/meta.json b/site/content/examples/17-special-elements/02-svelte-window/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/02-svelte-window/meta.json
rename to site/content/examples/17-special-elements/02-svelte-window/meta.json
diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte
rename to site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json b/site/content/examples/17-special-elements/03-svelte-window-bindings/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json
rename to site/content/examples/17-special-elements/03-svelte-window-bindings/meta.json
diff --git a/site/content/examples/16-special-elements/04-svelte-body/App.svelte b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/04-svelte-body/App.svelte
rename to site/content/examples/17-special-elements/04-svelte-body/App.svelte
diff --git a/site/content/examples/16-special-elements/04-svelte-body/meta.json b/site/content/examples/17-special-elements/04-svelte-body/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/04-svelte-body/meta.json
rename to site/content/examples/17-special-elements/04-svelte-body/meta.json
diff --git a/site/content/examples/16-special-elements/05-svelte-head/App.svelte b/site/content/examples/17-special-elements/05-svelte-head/App.svelte
similarity index 100%
rename from site/content/examples/16-special-elements/05-svelte-head/App.svelte
rename to site/content/examples/17-special-elements/05-svelte-head/App.svelte
diff --git a/site/content/examples/16-special-elements/05-svelte-head/meta.json b/site/content/examples/17-special-elements/05-svelte-head/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/05-svelte-head/meta.json
rename to site/content/examples/17-special-elements/05-svelte-head/meta.json
diff --git a/site/content/examples/16-special-elements/meta.json b/site/content/examples/17-special-elements/meta.json
similarity index 100%
rename from site/content/examples/16-special-elements/meta.json
rename to site/content/examples/17-special-elements/meta.json
diff --git a/site/content/examples/17-module-context/01-module-exports/App.svelte b/site/content/examples/18-module-context/01-module-exports/App.svelte
similarity index 100%
rename from site/content/examples/17-module-context/01-module-exports/App.svelte
rename to site/content/examples/18-module-context/01-module-exports/App.svelte
diff --git a/site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
similarity index 100%
rename from site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte
rename to site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
diff --git a/site/content/examples/17-module-context/01-module-exports/meta.json b/site/content/examples/18-module-context/01-module-exports/meta.json
similarity index 100%
rename from site/content/examples/17-module-context/01-module-exports/meta.json
rename to site/content/examples/18-module-context/01-module-exports/meta.json
diff --git a/site/content/examples/17-module-context/meta.json b/site/content/examples/18-module-context/meta.json
similarity index 100%
rename from site/content/examples/17-module-context/meta.json
rename to site/content/examples/18-module-context/meta.json
diff --git a/site/content/examples/18-debugging/00-debug/App.svelte b/site/content/examples/19-debugging/00-debug/App.svelte
similarity index 100%
rename from site/content/examples/18-debugging/00-debug/App.svelte
rename to site/content/examples/19-debugging/00-debug/App.svelte
diff --git a/site/content/examples/18-debugging/00-debug/meta.json b/site/content/examples/19-debugging/00-debug/meta.json
similarity index 100%
rename from site/content/examples/18-debugging/00-debug/meta.json
rename to site/content/examples/19-debugging/00-debug/meta.json
diff --git a/site/content/examples/18-debugging/meta.json b/site/content/examples/19-debugging/meta.json
similarity index 100%
rename from site/content/examples/18-debugging/meta.json
rename to site/content/examples/19-debugging/meta.json
diff --git a/site/content/examples/19-7guis/01-7guis-counter/App.svelte b/site/content/examples/20-7guis/01-7guis-counter/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/01-7guis-counter/App.svelte
rename to site/content/examples/20-7guis/01-7guis-counter/App.svelte
diff --git a/site/content/examples/19-7guis/01-7guis-counter/meta.json b/site/content/examples/20-7guis/01-7guis-counter/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/01-7guis-counter/meta.json
rename to site/content/examples/20-7guis/01-7guis-counter/meta.json
diff --git a/site/content/examples/19-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/02-7guis-temperature/App.svelte
rename to site/content/examples/20-7guis/02-7guis-temperature/App.svelte
diff --git a/site/content/examples/19-7guis/02-7guis-temperature/meta.json b/site/content/examples/20-7guis/02-7guis-temperature/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/02-7guis-temperature/meta.json
rename to site/content/examples/20-7guis/02-7guis-temperature/meta.json
diff --git a/site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte
rename to site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
diff --git a/site/content/examples/19-7guis/03-7guis-flight-booker/meta.json b/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/03-7guis-flight-booker/meta.json
rename to site/content/examples/20-7guis/03-7guis-flight-booker/meta.json
diff --git a/site/content/examples/19-7guis/04-7guis-timer/App.svelte b/site/content/examples/20-7guis/04-7guis-timer/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/04-7guis-timer/App.svelte
rename to site/content/examples/20-7guis/04-7guis-timer/App.svelte
diff --git a/site/content/examples/19-7guis/04-7guis-timer/meta.json b/site/content/examples/20-7guis/04-7guis-timer/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/04-7guis-timer/meta.json
rename to site/content/examples/20-7guis/04-7guis-timer/meta.json
diff --git a/site/content/examples/19-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/05-7guis-crud/App.svelte
rename to site/content/examples/20-7guis/05-7guis-crud/App.svelte
diff --git a/site/content/examples/19-7guis/05-7guis-crud/meta.json b/site/content/examples/20-7guis/05-7guis-crud/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/05-7guis-crud/meta.json
rename to site/content/examples/20-7guis/05-7guis-crud/meta.json
diff --git a/site/content/examples/19-7guis/06-7guis-circles/App.svelte b/site/content/examples/20-7guis/06-7guis-circles/App.svelte
similarity index 100%
rename from site/content/examples/19-7guis/06-7guis-circles/App.svelte
rename to site/content/examples/20-7guis/06-7guis-circles/App.svelte
diff --git a/site/content/examples/19-7guis/06-7guis-circles/meta.json b/site/content/examples/20-7guis/06-7guis-circles/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/06-7guis-circles/meta.json
rename to site/content/examples/20-7guis/06-7guis-circles/meta.json
diff --git a/site/content/examples/19-7guis/meta.json b/site/content/examples/20-7guis/meta.json
similarity index 100%
rename from site/content/examples/19-7guis/meta.json
rename to site/content/examples/20-7guis/meta.json
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
rename to site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
rename to site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
rename to site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
rename to site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte
rename to site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/meta.json b/site/content/examples/21-miscellaneous/01-hacker-news/meta.json
similarity index 100%
rename from site/content/examples/20-miscellaneous/01-hacker-news/meta.json
rename to site/content/examples/21-miscellaneous/01-hacker-news/meta.json
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
rename to site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
rename to site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
similarity index 100%
rename from site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
rename to site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js b/site/content/examples/21-miscellaneous/02-immutable-data/flash.js
similarity index 100%
rename from site/content/examples/20-miscellaneous/02-immutable-data/flash.js
rename to site/content/examples/21-miscellaneous/02-immutable-data/flash.js
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/meta.json b/site/content/examples/21-miscellaneous/02-immutable-data/meta.json
similarity index 100%
rename from site/content/examples/20-miscellaneous/02-immutable-data/meta.json
rename to site/content/examples/21-miscellaneous/02-immutable-data/meta.json
diff --git a/site/content/examples/20-miscellaneous/meta.json b/site/content/examples/21-miscellaneous/meta.json
similarity index 100%
rename from site/content/examples/20-miscellaneous/meta.json
rename to site/content/examples/21-miscellaneous/meta.json
diff --git a/site/static/examples/thumbnails/easing.jpg b/site/static/examples/thumbnails/easing.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..11c4871c2a9a9788bad3707654a255711f7f5fbb
GIT binary patch
literal 4461
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

literal 0
HcmV?d00001