Skip to content

Modify Frame animation of styles grid #39717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtias merged 5 commits into from
Oct 5, 2022
Merged

Modify Frame animation of styles grid #39717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e993317
Add midFrame animation of color array.
mtias Mar 24, 2022
4f5c9a2
Add main card animation and disable hover effect.
mtias Mar 24, 2022
19881fa
Use clip animation
mtias Mar 29, 2022
2a3e596
Change the styles variation effect to a simpler hover.
mtias Sep 19, 2022
8e5b1b7
Rework isWall into withHoverView prop.
mtias Oct 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 79 additions & 58 deletions packages/edit-site/src/components/global-styles/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};

Expand All @@ -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(
Expand All @@ -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();
Expand Down Expand Up @@ -116,7 +124,7 @@ const StylesPreview = ( { label, isFocused } ) => {
} }
initial="start"
animate={
( isHovered || isFocused ) && ! disableMotion
( isHovered || isFocused ) && ! disableMotion && label
? 'hover'
: 'start'
}
Expand All @@ -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
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/global-styles/screen-style-variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ function Variation( { variation } ) {
<StylesPreview
label={ variation?.title }
isFocused={ isFocused }
withHoverView
/>
</div>
</div>
Expand Down Expand Up @@ -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.'
) }
/>

Expand Down