From eedd727970cbec9f1bc66c3b0491124edfd67994 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 24 Jul 2021 19:16:00 +0100
Subject: [PATCH] fix the typewriter speed to scale correctly

---
 site/content/docs/02-template-syntax.md          | 16 +++++++++-------
 .../04-custom-js-transitions/App.svelte          |  6 +++---
 .../05-custom-js-transitions/app-b/App.svelte    |  6 +++---
 .../05-custom-js-transitions/text.md             |  4 ++--
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index ca0c1d4993..49e28daf77 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -962,20 +962,22 @@ A custom transition function can also return a `tick` function, which is called
 <script>
 	export let visible = false;
 
-	function typewriter(node, { speed = 50 }) {
+	function typewriter(node, { speed = 1 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
 			node.childNodes[0].nodeType === Node.TEXT_NODE
 		);
 
-		if (!valid) return {};
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
 
 		const text = node.textContent;
-		const duration = text.length * speed;
+		const duration = text.length / (speed * 0.01) ;
 
 		return {
 			duration,
-			tick: (t, u) => {
+			tick: t => {
 				const i = ~~(text.length * t);
 				node.textContent = text.slice(0, i);
 			}
@@ -984,7 +986,7 @@ A custom transition function can also return a `tick` function, which is called
 </script>
 
 {#if visible}
-	<p in:typewriter="{{ speed: 20 }}">
+	<p in:typewriter="{{ speed: 1 }}">
 		The quick brown fox jumps over the lazy dog
 	</p>
 {/if}
@@ -1247,7 +1249,7 @@ As with DOM events, if the `on:` directive is used without a value, the componen
 
 ---
 
-As of [Svelte 3.38](https://github.com/sveltejs/svelte/issues/6268) ([RFC](https://github.com/sveltejs/rfcs/pull/13)), you can pass styles as props to components for the purposes of theming, using CSS custom properties. 
+As of [Svelte 3.38](https://github.com/sveltejs/svelte/issues/6268) ([RFC](https://github.com/sveltejs/rfcs/pull/13)), you can pass styles as props to components for the purposes of theming, using CSS custom properties.
 
 Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
 
@@ -1274,7 +1276,7 @@ Desugars to this:
 </div>
 ```
 
-**Note**: Since this is an extra div, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature. Also note that not all browsers support `display: contents`: https://caniuse.com/css-display-contents 
+**Note**: Since this is an extra div, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature. Also note that not all browsers support `display: contents`: https://caniuse.com/css-display-contents
 
 ---
 
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
index 396c793639..835399fb8b 100644
--- a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	let visible = false;
 
-	function typewriter(node, { speed = 50 }) {
+	function typewriter(node, { speed = 1 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
 			node.childNodes[0].nodeType === Node.TEXT_NODE
@@ -12,7 +12,7 @@
 		}
 
 		const text = node.textContent;
-		const duration = text.length * speed;
+		const duration = text.length / (speed * 0.01) ;
 
 		return {
 			duration,
@@ -30,7 +30,7 @@
 </label>
 
 {#if visible}
-	<p in:typewriter>
+	<p in:typewriter out:typewriter>
 		The quick brown fox jumps over the lazy dog
 	</p>
 {/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 396c793639..835399fb8b 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	let visible = false;
 
-	function typewriter(node, { speed = 50 }) {
+	function typewriter(node, { speed = 1 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
 			node.childNodes[0].nodeType === Node.TEXT_NODE
@@ -12,7 +12,7 @@
 		}
 
 		const text = node.textContent;
-		const duration = text.length * speed;
+		const duration = text.length / (speed * 0.01) ;
 
 		return {
 			duration,
@@ -30,7 +30,7 @@
 </label>
 
 {#if visible}
-	<p in:typewriter>
+	<p in:typewriter out:typewriter>
 		The quick brown fox jumps over the lazy dog
 	</p>
 {/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
index cc25861c7b..19a7b9fce3 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
@@ -5,7 +5,7 @@ title: Custom JS transitions
 While you should generally use CSS for transitions as much as possible, there are some effects that can't be achieved without JavaScript, such as a typewriter effect:
 
 ```js
-function typewriter(node, { speed = 50 }) {
+function typewriter(node, { speed = 1 }) {
 	const valid = (
 		node.childNodes.length === 1 &&
 		node.childNodes[0].nodeType === Node.TEXT_NODE
@@ -16,7 +16,7 @@ function typewriter(node, { speed = 50 }) {
 	}
 
 	const text = node.textContent;
-	const duration = text.length * speed;
+	const duration = text.length / (speed * 0.01) ;
 
 	return {
 		duration,