DropZone: Smooth animation (#49517)

* Tweak animation * Add space between drop-zone icon and text * Update CHANGELOG.md
WordPress · Apr 4, 2023 · bb5b306 · bb5b306 · github-actions · Apr 4, 2023
1 parent f5fd962
commit bb5b306
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   `DropZone`: Smooth animation ([#49517](https://github.com/WordPress/gutenberg/pull/49517)).
+
 ## 23.7.0 (2023-03-29)
 
 -   `ImageSizeControl`: Remove the "Image Dimensions" label ([#49414](https://github.com/WordPress/gutenberg/pull/49414)).

diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -120,30 +120,34 @@ export function DropZoneComponent( {
 
 	let children;
 	const backdrop = {
-		hidden: { scaleY: 0, opacity: 0 },
+		hidden: { opacity: 0 },
 		show: {
-			scaleY: 1,
 			opacity: 1,
 			transition: {
 				type: 'tween',
 				duration: 0.2,
-				delay: 0.1,
-				delayChildren: 0.2,
+				delay: 0,
+				delayChildren: 0.1,
 			},
 		},
 		exit: {
-			scaleY: 1,
 			opacity: 0,
 			transition: {
-				duration: 0.3,
+				duration: 0.2,
 				delayChildren: 0,
 			},
 		},
 	};
 
 	const foreground = {
-		hidden: { opacity: 0, scale: 0.75 },
-		show: { opacity: 1, scale: 1 },
+		hidden: { opacity: 0, scale: 0.9 },
+		show: {
+			opacity: 1,
+			scale: 1,
+			transition: {
+				duration: 0.1,
+			},
+		},
 		exit: { opacity: 0, scale: 0.9 },
 	};
 

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
@@ -38,7 +38,7 @@
 }
 
 .components-drop-zone__content-icon {
-	margin: 0 auto;
+	margin: 0 auto $grid-unit-10;
 	line-height: 0;
 	fill: currentColor;
 	pointer-events: none;