From 8272c9ba94a1cf0ffed2c052fe73997a07bd83ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Thu, 24 Mar 2022 13:50:29 +0100
Subject: [PATCH] Add main card animation and disable hover effect.

---
 .../src/components/global-styles/preview.js   | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index fba8e9f063f4d..31896801917e6 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -106,7 +106,7 @@ const StylesPreview = ( { label, isFocused } ) => {
 				} }
 				initial="start"
 				animate={
-					( isHovered || isFocused ) && ! disableMotion
+					( isHovered || isFocused ) && ! disableMotion && label
 						? 'hover'
 						: 'start'
 				}
@@ -126,28 +126,38 @@ const StylesPreview = ( { label, isFocused } ) => {
 							overflow: 'hidden',
 						} }
 					>
-						<div
+						<motion.div
 							style={ {
 								fontFamily: headingFontFamily,
 								fontSize: 65 * ratio,
 								color: headingColor,
 								fontWeight: headingFontWeight,
 							} }
+							animate={ { scale: 1, opacity: 1 } }
+							initial={ { scale: 0.8, opacity: 0 } }
+							transition={ { delay: 0.2 } }
 						>
 							Aa
-						</div>
+						</motion.div>
 						<VStack spacing={ 2 * ratio }>
-							{ highlightedColors.map( ( { slug, color } ) => (
-								<div
-									key={ slug }
-									style={ {
-										height: 30 * ratio,
-										width: 30 * ratio,
-										background: color,
-										borderRadius: 15 * ratio,
-									} }
-								/>
-							) ) }
+							{ highlightedColors.map(
+								( { slug, color }, index ) => (
+									<motion.div
+										key={ slug }
+										style={ {
+											height: 30 * ratio,
+											width: 30 * ratio,
+											background: color,
+											borderRadius: 15 * ratio,
+										} }
+										animate={ { scale: 1, opacity: 1 } }
+										initial={ { scale: 0.1, opacity: 0 } }
+										transition={ {
+											delay: index === 1 ? 0.4 : 0.3,
+										} }
+									/>
+								)
+							) }
 						</VStack>
 					</HStack>
 				</motion.div>