Modify Frame animation of styles grid (#39717)

Rework animation of color array and hover state. It constructs a backdrop with a blurred out color palette from the json.
WordPress · Oct 5, 2022 · 049b09d · 049b09d
1 parent 30d67e8
commit 049b09d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 59 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -21,23 +21,32 @@ import { useGlobalStylesOutput } from './use-global-styles-output';
 
 const firstFrame = {
 	start: {
+		scale: 1,
 		opacity: 1,
-		display: 'block',
 	},
 	hover: {
+		scale: 0,
 		opacity: 0,
-		display: 'none',
+	},
+};
+
+const midFrame = {
+	hover: {
+		opacity: 1,
+	},
+	start: {
+		opacity: 0.5,
 	},
 };
 
 const secondFrame = {
 	hover: {
+		scale: 1,
 		opacity: 1,
-		display: 'block',
 	},
 	start: {
+		scale: 0,
 		opacity: 0,
-		display: 'none',
 	},
 };
 
@@ -46,7 +55,7 @@ const normalizedHeight = 152;
 
 const normalizedColorSwatchSize = 32;
 
-const StylesPreview = ( { label, isFocused } ) => {
+const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ headingFontFamily = fontFamily ] = useStyle(
@@ -57,7 +66,6 @@ const StylesPreview = ( { label, isFocused } ) => {
 	);
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
-	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
@@ -116,7 +124,7 @@ const StylesPreview = ( { label, isFocused } ) => {
 				} }
 				initial="start"
 				animate={
-					( isHovered || isFocused ) && ! disableMotion
+					( isHovered || isFocused ) && ! disableMotion && label
 						? 'hover'
 						: 'start'
 				}
@@ -136,41 +144,90 @@ 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.1, opacity: 0 } }
+							transition={ { delay: 0.3, type: 'tween' } }
 						>
 							Aa
-						</div>
+						</motion.div>
 						<VStack spacing={ 4 * ratio }>
-							{ highlightedColors.map( ( { slug, color } ) => (
+							{ highlightedColors.map(
+								( { slug, color }, index ) => (
+									<motion.div
+										key={ slug }
+										style={ {
+											height:
+												normalizedColorSwatchSize *
+												ratio,
+											width:
+												normalizedColorSwatchSize *
+												ratio,
+											background: color,
+											borderRadius:
+												( normalizedColorSwatchSize *
+													ratio ) /
+												2,
+										} }
+										animate={ { scale: 1, opacity: 1 } }
+										initial={ { scale: 0.1, opacity: 0 } }
+										transition={ {
+											delay: index === 1 ? 0.2 : 0.1,
+										} }
+									/>
+								)
+							) }
+						</VStack>
+					</HStack>
+				</motion.div>
+				<motion.div
+					variants={ withHoverView && midFrame }
+					style={ {
+						height: '100%',
+						width: '100%',
+						position: 'absolute',
+						top: 0,
+						overflow: 'hidden',
+						filter: 'blur(60px)',
+						opacity: 0.1,
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="flex-start"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ paletteColors
+							.slice( 0, 4 )
+							.map( ( { color }, index ) => (
 								<div
-									key={ slug }
+									key={ index }
 									style={ {
-										height:
-											normalizedColorSwatchSize * ratio,
-										width:
-											normalizedColorSwatchSize * ratio,
+										height: '100%',
 										background: color,
-										borderRadius:
-											( normalizedColorSwatchSize *
-												ratio ) /
-											2,
+										flexGrow: 1,
 									} }
 								/>
 							) ) }
-						</VStack>
 					</HStack>
 				</motion.div>
 				<motion.div
 					variants={ secondFrame }
 					style={ {
 						height: '100%',
+						width: '100%',
 						overflow: 'hidden',
+						position: 'absolute',
+						top: 0,
 					} }
 				>
 					<VStack
@@ -186,53 +243,17 @@ const StylesPreview = ( { label, isFocused } ) => {
 						{ label && (
 							<div
 								style={ {
-									fontSize: 35 * ratio,
+									fontSize: 40 * ratio,
 									fontFamily: headingFontFamily,
 									color: headingColor,
 									fontWeight: headingFontWeight,
 									lineHeight: '1em',
+									textAlign: 'center',
 								} }
 							>
 								{ label }
 							</div>
 						) }
-						<HStack spacing={ 2 * ratio } justify="flex-start">
-							<div
-								style={ {
-									fontFamily,
-									fontSize: 24 * ratio,
-									color: textColor,
-								} }
-							>
-								Aa
-							</div>
-							<div
-								style={ {
-									fontFamily,
-									fontSize: 24 * ratio,
-									color: linkColor,
-								} }
-							>
-								Aa
-							</div>
-						</HStack>
-						{ paletteColors && (
-							<HStack spacing={ 0 }>
-								{ paletteColors
-									.slice( 0, 4 )
-									.map( ( { color }, index ) => (
-										<div
-											key={ index }
-											style={ {
-												height: 10 * ratio,
-												width: 30 * ratio,
-												background: color,
-												flexGrow: 1,
-											} }
-										/>
-									) ) }
-							</HStack>
-						) }
 					</VStack>
 				</motion.div>
 			</motion.div>

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -87,6 +87,7 @@ function Variation( { variation } ) {
 					<StylesPreview
 						label={ variation?.title }
 						isFocused={ isFocused }
+						withHoverView
 					/>
 				</div>
 			</div>
@@ -125,7 +126,7 @@ function ScreenStyleVariations() {
 				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
-					'Choose a different style combination for the theme styles'
+					'Choose a variation to change the look of the site.'
 				) }
 			/>