From b815ac7be9939aec75670477f198412e5038bdc7 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 15 Apr 2019 14:24:15 -0400
Subject: [PATCH 1/4] document store bindings and $foo += 1

---
 .../06-store-bindings/app-a/App.svelte        |  6 +++++
 .../06-store-bindings/app-a/stores.js         |  8 +++++++
 .../06-store-bindings/app-b/App.svelte        | 10 ++++++++
 .../06-store-bindings/app-b/stores.js         |  8 +++++++
 .../08-stores/06-store-bindings/text.md       | 23 +++++++++++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/text.md

diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..3839224826
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input value={$name}>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..52f04be957
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input bind:value={$name}>
+
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/text.md b/site/content/tutorial/08-stores/06-store-bindings/text.md
new file mode 100644
index 0000000000..7034703f33
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/text.md
@@ -0,0 +1,23 @@
+---
+title: Store bindings
+---
+
+If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state.
+
+In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
+
+```html
+<input bind:value={$name}>
+```
+
+Changing the input value will now update `name` and all its dependents.
+
+We can also assign directly to store values inside a component. Add a `<button>` element:
+
+```html
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
+```
+
+The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.
\ No newline at end of file

From f04225fa0f8d6e86034afa9d7bab3771bcb7913a Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 15 Apr 2019 16:38:09 -0400
Subject: [PATCH 2/4] document local transitions

---
 .../07-local-transitions/app-a/App.svelte     | 32 +++++++++++++++++++
 .../07-local-transitions/app-b/App.svelte     | 32 +++++++++++++++++++
 .../07-local-transitions/text.md              | 15 +++++++++
 .../app-a/App.svelte                          |  0
 .../app-a/crossfade.js                        |  0
 .../app-b/App.svelte                          |  0
 .../app-b/crossfade.js                        |  0
 .../text.md                                   |  0
 8 files changed, 79 insertions(+)
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/text.md
 rename site/content/tutorial/10-transitions/{07-deferred-transitions => 08-deferred-transitions}/app-a/App.svelte (100%)
 rename site/content/tutorial/10-transitions/{07-deferred-transitions => 08-deferred-transitions}/app-a/crossfade.js (100%)
 rename site/content/tutorial/10-transitions/{07-deferred-transitions => 08-deferred-transitions}/app-b/App.svelte (100%)
 rename site/content/tutorial/10-transitions/{07-deferred-transitions => 08-deferred-transitions}/app-b/crossfade.js (100%)
 rename site/content/tutorial/10-transitions/{07-deferred-transitions => 08-deferred-transitions}/text.md (100%)

diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..ed93815c0d
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { slide } from 'svelte/transition';
+
+	let showItems = true;
+	let i = 5;
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+</script>
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
+
+<label>
+	<input type="checkbox" bind:checked={showItems}>
+	show list
+</label>
+
+<label>
+	<input type="range" bind:value={i} max=10>
+
+</label>
+
+{#if showItems}
+	{#each items.slice(0, i) as item}
+		<div transition:slide>
+			{item}
+		</div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..3d569cfcbb
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { slide } from 'svelte/transition';
+
+	let showItems = true;
+	let i = 5;
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+</script>
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
+
+<label>
+	<input type="checkbox" bind:checked={showItems}>
+	show list
+</label>
+
+<label>
+	<input type="range" bind:value={i} max=10>
+
+</label>
+
+{#if showItems}
+	{#each items.slice(0, i) as item}
+		<div transition:slide|local>
+			{item}
+		</div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/text.md b/site/content/tutorial/10-transitions/07-local-transitions/text.md
new file mode 100644
index 0000000000..7a22967ab0
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/text.md
@@ -0,0 +1,15 @@
+---
+title: Local transitions
+---
+
+Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
+
+Instead, we'd like transitions to play only when individual items are added and removed — on other words, when the user drags the slider.
+
+We can achieve this with a *local* transition, which only plays when the immediate parent block is added or removed:
+
+```html
+<div transition:slide|local>
+	{item}
+</div>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-deferred-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/10-transitions/07-deferred-transitions/app-a/App.svelte
rename to site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
diff --git a/site/content/tutorial/10-transitions/07-deferred-transitions/app-a/crossfade.js b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js
similarity index 100%
rename from site/content/tutorial/10-transitions/07-deferred-transitions/app-a/crossfade.js
rename to site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js
diff --git a/site/content/tutorial/10-transitions/07-deferred-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/10-transitions/07-deferred-transitions/app-b/App.svelte
rename to site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
diff --git a/site/content/tutorial/10-transitions/07-deferred-transitions/app-b/crossfade.js b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js
similarity index 100%
rename from site/content/tutorial/10-transitions/07-deferred-transitions/app-b/crossfade.js
rename to site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js
diff --git a/site/content/tutorial/10-transitions/07-deferred-transitions/text.md b/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
similarity index 100%
rename from site/content/tutorial/10-transitions/07-deferred-transitions/text.md
rename to site/content/tutorial/10-transitions/08-deferred-transitions/text.md

From b1737503f048639219550b6e568b7ba578b0ae27 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Tue, 16 Apr 2019 09:00:55 -0400
Subject: [PATCH 3/4] start updating deferred transition chapter

---
 .../08-deferred-transitions/app-a/App.svelte  | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
index c46096c204..1c719c6043 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { quintOut } from 'svelte/easing';
-	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+	import { crossfade } from 'svelte/transition';
 
-	const { send, receive } = crossfade({
+	const [send, receive] = crossfade({
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -46,53 +46,47 @@
 
 	function handleKeydown(event) {
 		if (event.which === 13) {
-			addTodo(event.target);
+			add(event.target);
 		}
 	}
 </script>
 
 <style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
-
 	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
 		max-width: 36em;
 		margin: 0 auto;
 	}
 
-	.left, .right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
+	.new-todo {
+		font-size: 1.4em;
+		grid-column: 1/3;
 	}
 
 	h2 {
 		font-size: 2em;
 		font-weight: 200;
 		user-select: none;
+		margin: 0 0 0.5em 0;
 	}
 
 	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
 		line-height: 1;
 		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
+		margin: 0 0 0.5em 0;
 		border-radius: 2px;
-		background-color: #eee;
 		user-select: none;
+		border: 1px solid rgba(103,103,120, 0.5);
+		background-color: rgba(103,103,120,0.1);
+		color: #333;
 	}
 
 	input { margin: 0 }
 
-	.right label {
-		background-color: rgb(180,240,100);
+	.done {
+		opacity: 0.3;
 	}
 
 	button {
@@ -114,7 +108,7 @@
 </style>
 
 <div class='board'>
-	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
+	<input class="new-todo" placeholder="what needs to be done?" on:keydown={handleKeydown}>
 
 	<div class='left'>
 		<h2>todo</h2>
@@ -134,6 +128,7 @@
 		<h2>done</h2>
 		{#each todos.filter(t => t.done) as todo (todo.id)}
 			<label
+				class="done"
 				in:receive="{{key: todo.id}}"
 				out:send="{{key: todo.id}}"
 			>

From bb10298f2cf29aa6e6a4bdbe2d83a4d8bef1cd75 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 16 Apr 2019 18:35:56 -0400
Subject: [PATCH 4/4] update animate chapter

---
 .../08-deferred-transitions/app-a/App.svelte  | 127 +++++++-------
 .../app-a/crossfade.js                        |  65 -------
 .../08-deferred-transitions/app-b/App.svelte  | 161 +++++++++--------
 .../app-b/crossfade.js                        |  65 -------
 .../08-deferred-transitions/text.md           |  25 ++-
 .../11-animations/01-animate/app-a/App.svelte | 161 +++++++++--------
 .../01-animate/app-a/crossfade.js             |  65 -------
 .../11-animations/01-animate/app-b/App.svelte | 164 ++++++++++--------
 .../01-animate/app-b/crossfade.js             |  65 -------
 .../tutorial/11-animations/01-animate/text.md |  34 +++-
 10 files changed, 382 insertions(+), 550 deletions(-)
 delete mode 100644 site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js
 delete mode 100644 site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js
 delete mode 100644 site/content/tutorial/11-animations/01-animate/app-a/crossfade.js
 delete mode 100644 site/content/tutorial/11-animations/01-animate/app-b/crossfade.js

diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
index 1c719c6043..e869816730 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
@@ -3,6 +3,8 @@
 	import { crossfade } from 'svelte/transition';
 
 	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
+
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -18,17 +20,17 @@
 		}
 	});
 
+	let uid = 1;
+
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
 	];
 
-	let uid = todos.length + 1;
-
 	function add(input) {
 		const todo = {
 			id: uid++,
@@ -44,13 +46,42 @@
 		todos = todos.filter(t => t !== todo);
 	}
 
-	function handleKeydown(event) {
-		if (event.which === 13) {
-			add(event.target);
-		}
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
 	}
 </script>
 
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.which === 13 && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label class="done">
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
 <style>
 	.board {
 		display: grid;
@@ -60,7 +91,7 @@
 		margin: 0 auto;
 	}
 
-	.new-todo {
+	.board > input {
 		font-size: 1.4em;
 		grid-column: 1/3;
 	}
@@ -73,69 +104,45 @@
 	}
 
 	label {
-		line-height: 1;
-		padding: 0.5em;
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
 		margin: 0 0 0.5em 0;
 		border-radius: 2px;
 		user-select: none;
-		border: 1px solid rgba(103,103,120, 0.5);
-		background-color: rgba(103,103,120,0.1);
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
 		color: #333;
 	}
 
-	input { margin: 0 }
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
 
 	.done {
-		opacity: 0.3;
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
 	}
 
 	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
 		border: none;
-		color: rgb(170,30,30);
 		opacity: 0;
 		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
 	}
 
 	label:hover button {
 		opacity: 1;
 	}
-</style>
-
-<div class='board'>
-	<input class="new-todo" placeholder="what needs to be done?" on:keydown={handleKeydown}>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				class="done"
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js
deleted file mode 100644
index e11e18b60e..0000000000
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/crossfade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { quintOut } from 'svelte/easing';
-
-export default function crossfade({ send, receive, fallback }) {
-	let requested = new Map();
-	let provided = new Map();
-
-	function crossfade(from, node) {
-		const to = node.getBoundingClientRect();
-		const dx = from.left - to.left;
-		const dy = from.top - to.top;
-
-		const style = getComputedStyle(node);
-		const transform = style.transform === 'none' ? '' : style.transform;
-
-		return {
-			duration: 400,
-			easing: quintOut,
-			css: (t, u) => `
-				opacity: ${t};
-				transform: ${transform} translate(${u * dx}px,${u * dy}px);
-			`
-		};
-	}
-
-	return {
-		send(node, params) {
-			provided.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (requested.has(params.key)) {
-					const { rect } = requested.get(params.key);
-					requested.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				// if the node is disappearing altogether
-				// (i.e. wasn't claimed by the other list)
-				// then we need to supply an outro
-				provided.delete(params.key);
-				return fallback(node, params);
-			};
-		},
-
-		receive(node, params) {
-			requested.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (provided.has(params.key)) {
-					const { rect } = provided.get(params.key);
-					provided.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				requested.delete(params.key);
-				return fallback(node, params);
-			};
-		}
-	};
-}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
index c46096c204..3cb21a8ed9 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { quintOut } from 'svelte/easing';
-	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+	import { crossfade } from 'svelte/transition';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
 
-	const { send, receive } = crossfade({
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -18,17 +20,17 @@
 		}
 	});
 
+	let uid = 1;
+
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
 	];
 
-	let uid = todos.length + 1;
-
 	function add(input) {
 		const todo = {
 			id: uid++,
@@ -44,103 +46,110 @@
 		todos = todos.filter(t => t !== todo);
 	}
 
-	function handleKeydown(event) {
-		if (event.which === 13) {
-			addTodo(event.target);
-		}
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
 	}
 </script>
 
-<style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.which === 13 && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
 
+<style>
 	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
 		max-width: 36em;
 		margin: 0 auto;
 	}
 
-	.left, .right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
 	}
 
 	h2 {
 		font-size: 2em;
 		font-weight: 200;
 		user-select: none;
+		margin: 0 0 0.5em 0;
 	}
 
 	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
-		line-height: 1;
-		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
 		border-radius: 2px;
-		background-color: #eee;
 		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
 	}
 
-	input { margin: 0 }
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
 
-	.right label {
-		background-color: rgb(180,240,100);
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
 	}
 
 	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
 		border: none;
-		color: rgb(170,30,30);
 		opacity: 0;
 		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
 	}
 
 	label:hover button {
 		opacity: 1;
 	}
-</style>
-
-<div class='board'>
-	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js
deleted file mode 100644
index e11e18b60e..0000000000
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/crossfade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { quintOut } from 'svelte/easing';
-
-export default function crossfade({ send, receive, fallback }) {
-	let requested = new Map();
-	let provided = new Map();
-
-	function crossfade(from, node) {
-		const to = node.getBoundingClientRect();
-		const dx = from.left - to.left;
-		const dy = from.top - to.top;
-
-		const style = getComputedStyle(node);
-		const transform = style.transform === 'none' ? '' : style.transform;
-
-		return {
-			duration: 400,
-			easing: quintOut,
-			css: (t, u) => `
-				opacity: ${t};
-				transform: ${transform} translate(${u * dx}px,${u * dy}px);
-			`
-		};
-	}
-
-	return {
-		send(node, params) {
-			provided.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (requested.has(params.key)) {
-					const { rect } = requested.get(params.key);
-					requested.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				// if the node is disappearing altogether
-				// (i.e. wasn't claimed by the other list)
-				// then we need to supply an outro
-				provided.delete(params.key);
-				return fallback(node, params);
-			};
-		},
-
-		receive(node, params) {
-			requested.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (provided.has(params.key)) {
-					const { rect } = provided.get(params.key);
-					provided.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				requested.delete(params.key);
-				return fallback(node, params);
-			};
-		}
-	};
-}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/text.md b/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
index e649762f57..49f626554d 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
@@ -4,4 +4,27 @@ title: Deferred transitions
 
 A particularly powerful feature of Svelte's transition engine is the ability to *defer* transitions, so that they can be coordinated between multiple elements.
 
-TODO https://github.com/sveltejs/svelte/issues/2159
\ No newline at end of file
+Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
+
+We can achieve this effect using the `crossfade` function, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+
+Find the `<label>` element on line 65, and add the `send` and `receive` transitions:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+>
+```
+
+Do the same for the next `<label>` element:
+
+```html
+<label
+	class="done"
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+>
+```
+
+Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-a/App.svelte b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
index c46096c204..3cb21a8ed9 100644
--- a/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
+++ b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { quintOut } from 'svelte/easing';
-	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+	import { crossfade } from 'svelte/transition';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
 
-	const { send, receive } = crossfade({
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -18,17 +20,17 @@
 		}
 	});
 
+	let uid = 1;
+
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
 	];
 
-	let uid = todos.length + 1;
-
 	function add(input) {
 		const todo = {
 			id: uid++,
@@ -44,103 +46,110 @@
 		todos = todos.filter(t => t !== todo);
 	}
 
-	function handleKeydown(event) {
-		if (event.which === 13) {
-			addTodo(event.target);
-		}
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
 	}
 </script>
 
-<style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.which === 13 && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
 
+<style>
 	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
 		max-width: 36em;
 		margin: 0 auto;
 	}
 
-	.left, .right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
 	}
 
 	h2 {
 		font-size: 2em;
 		font-weight: 200;
 		user-select: none;
+		margin: 0 0 0.5em 0;
 	}
 
 	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
-		line-height: 1;
-		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
 		border-radius: 2px;
-		background-color: #eee;
 		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
 	}
 
-	input { margin: 0 }
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
 
-	.right label {
-		background-color: rgb(180,240,100);
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
 	}
 
 	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
 		border: none;
-		color: rgb(170,30,30);
 		opacity: 0;
 		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
 	}
 
 	label:hover button {
 		opacity: 1;
 	}
-</style>
-
-<div class='board'>
-	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-a/crossfade.js b/site/content/tutorial/11-animations/01-animate/app-a/crossfade.js
deleted file mode 100644
index e11e18b60e..0000000000
--- a/site/content/tutorial/11-animations/01-animate/app-a/crossfade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { quintOut } from 'svelte/easing';
-
-export default function crossfade({ send, receive, fallback }) {
-	let requested = new Map();
-	let provided = new Map();
-
-	function crossfade(from, node) {
-		const to = node.getBoundingClientRect();
-		const dx = from.left - to.left;
-		const dy = from.top - to.top;
-
-		const style = getComputedStyle(node);
-		const transform = style.transform === 'none' ? '' : style.transform;
-
-		return {
-			duration: 400,
-			easing: quintOut,
-			css: (t, u) => `
-				opacity: ${t};
-				transform: ${transform} translate(${u * dx}px,${u * dy}px);
-			`
-		};
-	}
-
-	return {
-		send(node, params) {
-			provided.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (requested.has(params.key)) {
-					const { rect } = requested.get(params.key);
-					requested.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				// if the node is disappearing altogether
-				// (i.e. wasn't claimed by the other list)
-				// then we need to supply an outro
-				provided.delete(params.key);
-				return fallback(node, params);
-			};
-		},
-
-		receive(node, params) {
-			requested.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (provided.has(params.key)) {
-					const { rect } = provided.get(params.key);
-					provided.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				requested.delete(params.key);
-				return fallback(node, params);
-			};
-		}
-	};
-}
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-b/App.svelte b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
index c46096c204..6194dd941e 100644
--- a/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
+++ b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
@@ -1,8 +1,11 @@
 <script>
 	import { quintOut } from 'svelte/easing';
-	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+	import { crossfade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
 
-	const { send, receive } = crossfade({
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -18,17 +21,17 @@
 		}
 	});
 
+	let uid = 1;
+
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
 	];
 
-	let uid = todos.length + 1;
-
 	function add(input) {
 		const todo = {
 			id: uid++,
@@ -44,103 +47,112 @@
 		todos = todos.filter(t => t !== todo);
 	}
 
-	function handleKeydown(event) {
-		if (event.which === 13) {
-			addTodo(event.target);
-		}
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
 	}
 </script>
 
-<style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.which === 13 && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
 
+<style>
 	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
 		max-width: 36em;
 		margin: 0 auto;
 	}
 
-	.left, .right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
 	}
 
 	h2 {
 		font-size: 2em;
 		font-weight: 200;
 		user-select: none;
+		margin: 0 0 0.5em 0;
 	}
 
 	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
-		line-height: 1;
-		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
 		border-radius: 2px;
-		background-color: #eee;
 		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
 	}
 
-	input { margin: 0 }
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
 
-	.right label {
-		background-color: rgb(180,240,100);
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
 	}
 
 	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
 		border: none;
-		color: rgb(170,30,30);
 		opacity: 0;
 		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
 	}
 
 	label:hover button {
 		opacity: 1;
 	}
-</style>
-
-<div class='board'>
-	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-b/crossfade.js b/site/content/tutorial/11-animations/01-animate/app-b/crossfade.js
deleted file mode 100644
index e11e18b60e..0000000000
--- a/site/content/tutorial/11-animations/01-animate/app-b/crossfade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { quintOut } from 'svelte/easing';
-
-export default function crossfade({ send, receive, fallback }) {
-	let requested = new Map();
-	let provided = new Map();
-
-	function crossfade(from, node) {
-		const to = node.getBoundingClientRect();
-		const dx = from.left - to.left;
-		const dy = from.top - to.top;
-
-		const style = getComputedStyle(node);
-		const transform = style.transform === 'none' ? '' : style.transform;
-
-		return {
-			duration: 400,
-			easing: quintOut,
-			css: (t, u) => `
-				opacity: ${t};
-				transform: ${transform} translate(${u * dx}px,${u * dy}px);
-			`
-		};
-	}
-
-	return {
-		send(node, params) {
-			provided.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (requested.has(params.key)) {
-					const { rect } = requested.get(params.key);
-					requested.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				// if the node is disappearing altogether
-				// (i.e. wasn't claimed by the other list)
-				// then we need to supply an outro
-				provided.delete(params.key);
-				return fallback(node, params);
-			};
-		},
-
-		receive(node, params) {
-			requested.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (provided.has(params.key)) {
-					const { rect } = provided.get(params.key);
-					provided.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				requested.delete(params.key);
-				return fallback(node, params);
-			};
-		}
-	};
-}
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/text.md b/site/content/tutorial/11-animations/01-animate/text.md
index 7b8268e37b..9a1808e259 100644
--- a/site/content/tutorial/11-animations/01-animate/text.md
+++ b/site/content/tutorial/11-animations/01-animate/text.md
@@ -2,4 +2,36 @@
 title: The animate directive
 ---
 
-TODO fix https://github.com/sveltejs/svelte/issues/2159 before working on `animate`
\ No newline at end of file
+In the [previous chapter](tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+
+To complete the illusion, we also need to apply motion to the elements that *aren't* transitioning. For this, we use the `animate` directive.
+
+First, import the `flip` function — flip stands for ['First, Last, Invert, Play'](https://aerotwist.com/blog/flip-your-animations/) — from `svelte/animate`:
+
+```js
+import { flip } from 'svelte/animate';
+```
+
+Then add it to the `<label>` elements:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+	animate:flip
+>
+```
+
+The movement is a little slow in this case, so we can add a `duration` parameter:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+	animate:flip="{{duration: 200}}"
+>
+```
+
+> `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
+
+Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.
\ No newline at end of file