Add main card animation and disable hover effect.

WordPress · Mar 24, 2022 · 8272c9b · 8272c9b
1 parent 5b338e6
commit 8272c9b
Showing 1 changed file with 24 additions and 14 deletions.
diff --git 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>