Smoother animation settings on flyouts

ryankeairns · ryankeairns · commit 0a35d4157388 · 2025-07-28T17:24:55.000-07:00
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
@@ -15,7 +15,7 @@
   "euiContrastRatioGraphic": 3,
   "euiContrastRatioDisabled": 2,
   "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
-  "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
+  "euiAnimSlightResistance": "cubic-bezier(.32, .72, 0, 1)",
   "euiAnimSpeedExtraFast": "90ms",
   "euiAnimSpeedFast": "150ms",
   "euiAnimSpeedNormal": "250ms",
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json
@@ -15,7 +15,7 @@
   "euiContrastRatioGraphic": 3,
   "euiContrastRatioDisabled": 2,
   "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
-  "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
+  "euiAnimSlightResistance": "cubic-bezier(.32, .72, 0, 1)",
   "euiAnimSpeedExtraFast": "90ms",
   "euiAnimSpeedFast": "150ms",
   "euiAnimSpeedNormal": "250ms",
diff --git a/packages/eui-theme-borealis/src/variables/_animation.ts b/packages/eui-theme-borealis/src/variables/_animation.ts
@@ -22,7 +22,7 @@ export const animation_speed: _EuiThemeAnimationSpeeds = {
 
 export const animation_ease: _EuiThemeAnimationEasings = {
   bounce: 'cubic-bezier(.34, 1.61, .7, 1)',
-  resistance: 'cubic-bezier(.694, .0482, .335, 1)',
+  resistance: 'cubic-bezier(.32, .72, 0, 1)',
 };
 
 export const animation: _EuiThemeAnimation = {
diff --git a/packages/eui-theme-common/src/global_styling/variables/_animations.scss b/packages/eui-theme-common/src/global_styling/variables/_animations.scss
@@ -1,7 +1,7 @@
 // Animations
 
 $euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
-$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
+$euiAnimSlightResistance: cubic-bezier(.32, .72, 0, 1) !default;
 
 $euiAnimSpeedExtraFast: 90ms !default;
 $euiAnimSpeedFast: 150ms !default;
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -27,7 +27,7 @@ export const euiFlyoutSlideInRight = keyframes`
     opacity: 0;
     transform: translateX(100%);
   }
-  75% {
+  85% {
     opacity: 1;
     transform: translateX(0%);
   }
@@ -38,7 +38,7 @@ export const euiFlyoutSlideInLeft = keyframes`
     opacity: 0;
     transform: translateX(-100%);
   }
-  75% {
+  85% {
     opacity: 1;
     transform: translateX(0%);
   }
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_animation.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_animation.ts
@@ -22,7 +22,7 @@ export const animation_speed: _EuiThemeAnimationSpeeds = {
 
 export const animation_ease: _EuiThemeAnimationEasings = {
   bounce: 'cubic-bezier(.34, 1.61, .7, 1)',
-  resistance: 'cubic-bezier(.694, .0482, .335, 1)',
+  resistance: 'cubic-bezier(.32, .72, 0, 1)',
 };
 
 export const animation: _EuiThemeAnimation = {
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json b/packages/eui/src/themes/json/eui_theme_borealis_dark.json
@@ -15,7 +15,7 @@
   "euiContrastRatioGraphic": 3,
   "euiContrastRatioDisabled": 2,
   "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
-  "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
+  "euiAnimSlightResistance": "cubic-bezier(.32, .72, 0, 1)",
   "euiAnimSpeedExtraFast": "90ms",
   "euiAnimSpeedFast": "150ms",
   "euiAnimSpeedNormal": "250ms",
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json b/packages/eui/src/themes/json/eui_theme_borealis_light.json
@@ -15,7 +15,7 @@
   "euiContrastRatioGraphic": 3,
   "euiContrastRatioDisabled": 2,
   "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
-  "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
+  "euiAnimSlightResistance": "cubic-bezier(.32, .72, 0, 1)",
   "euiAnimSpeedExtraFast": "90ms",
   "euiAnimSpeedFast": "150ms",
   "euiAnimSpeedNormal": "250ms",

Original file line number	Diff line number	Diff line change
@@ -27,7 +27,7 @@ export const euiFlyoutSlideInRight = keyframes`
`27`	`27`	`opacity: 0;`
`28`	`28`	`transform: translateX(100%);`
`29`	`29`	`}`
`30`		`- 75% {`
	`30`	`+ 85% {`
`31`	`31`	`opacity: 1;`
`32`	`32`	`transform: translateX(0%);`
`33`	`33`	`}`
@@ -38,7 +38,7 @@ export const euiFlyoutSlideInLeft = keyframes`
`38`	`38`	`opacity: 0;`
`39`	`39`	`transform: translateX(-100%);`
`40`	`40`	`}`
`41`		`- 75% {`
	`41`	`+ 85% {`
`42`	`42`	`opacity: 1;`
`43`	`43`	`transform: translateX(0%);`
`44`	`44`	`}`