From 97bc8cf87649ea2d7f028e32eb1b9728c4e6b31b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sat, 24 Aug 2024 17:42:49 +0200
Subject: [PATCH] Parametrise animation

---
 packages/components/src/navigator/styles.ts | 33 ++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
index e01ea73aad1076..648c4f38a0b674 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -56,14 +56,39 @@ type NavigatorScreenAnimationProps = {
 	isAnimatingOut: boolean;
 };
 
+const FADE = {
+	DURATION: '70ms',
+	EASING: 'linear',
+	DELAY: {
+		IN: '70ms',
+		OUT: '40ms',
+	},
+};
+const SLIDE = {
+	DURATION: '300ms',
+	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
 const ANIMATION = {
 	forwards: {
-		in: css`70ms cubic-bezier(0, 0, 0.2, 1) 70ms both ${ fadeIn }, 300ms cubic-bezier(0.4, 0, 0.2, 1) both ${ slideFromRight }`,
-		out: css`70ms cubic-bezier(0.4, 0, 1, 1) 40ms forwards ${ fadeOut }, 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards ${ slideToLeft }`,
+		in: css`
+			${ FADE.DURATION } ${ FADE.EASING } ${ FADE.DELAY
+				.IN } both ${ fadeIn }, ${ SLIDE.DURATION } ${ SLIDE.EASING } both ${ slideFromRight }
+		`,
+		out: css`
+			${ FADE.DURATION } ${ FADE.EASING } ${ FADE.DELAY
+				.IN } both ${ fadeOut }, ${ SLIDE.DURATION } ${ SLIDE.EASING } both ${ slideToLeft }
+		`,
 	},
 	backwards: {
-		in: css`70ms cubic-bezier(0, 0, 0.2, 1) 70ms both ${ fadeIn }, 300ms cubic-bezier(0.4, 0, 0.2, 1) both ${ slideFromLeft }`,
-		out: css`70ms cubic-bezier(0.4, 0, 1, 1) 40ms forwards ${ fadeOut }, 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards ${ slideToRight }`,
+		in: css`
+			${ FADE.DURATION } ${ FADE.EASING } ${ FADE.DELAY
+				.IN } both ${ fadeIn }, ${ SLIDE.DURATION } ${ SLIDE.EASING } both ${ slideFromLeft }
+		`,
+		out: css`
+			${ FADE.DURATION } ${ FADE.EASING } ${ FADE.DELAY
+				.OUT } both ${ fadeOut }, ${ SLIDE.DURATION } ${ SLIDE.EASING } both ${ slideToRight }
+		`,
 	},
 };
 const navigatorScreenAnimation = ( {