fix: using u as in the description (#1106)

* Fixing missing parentheses and using u as in doc above * added to inital app
sveltejs · Jan 13, 2025 · 8a182ce · 8a182ce
1 parent 1118ced
commit 8a182ce
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte b/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
@@ -6,7 +6,7 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => ``
+			css: (t, u) => ``
 		};
 	}
 </script>

diff --git a/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte b/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
@@ -7,15 +7,15 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => {
+			css: (t, u) => {
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`;
 			}
 		};

diff --git a/...ev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md b/...ev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
@@ -53,15 +53,15 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => +++{
+			css: (t, u) => +++{
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`
 			}+++
 		};