From 8d3f4512f6f41720740680aae9e6ceb5cd2be691 Mon Sep 17 00:00:00 2001
From: duarte-pompeu <duarte-pompeu@users.noreply.github.com>
Date: Sat, 28 Aug 2021 03:50:44 +0100
Subject: [PATCH] [docs] Fix the speed of the typewriter example to scale
 correctly (#6568)

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

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 8f3afce281..8f9dc7b68f 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -963,20 +963,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);
 			}
@@ -985,7 +987,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}
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..5e1ad9863c 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..5e1ad9863c 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..25b8d0bd52 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,