Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: New animation for Concat Link

Browse Source
This commit is contained in:
blessedcoolant 2023-07-28 18:55:59 +12:00
parent 6a49eec606
commit f155b03eee
2 changed files with 60 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
View File

@ -24,7 +24,7 @@ export default function ParamSDXLPromptArea() {
sx={{ sx={{
position: 'absolute', position: 'absolute',
w: 'full', w: 'full',
top: shouldPinParametersPanel ? '131px' : '187px', top: shouldPinParametersPanel ? '119px' : '175px',
}} }}
> >
<SDXLConcatLink /> <SDXLConcatLink />
@ -33,7 +33,7 @@ export default function ParamSDXLPromptArea() {
sx={{ sx={{
position: 'absolute', position: 'absolute',
w: 'full', w: 'full',
top: shouldPinParametersPanel ? '275px' : '331px', top: shouldPinParametersPanel ? '263px' : '319px',
}} }}
> >
<SDXLConcatLink /> <SDXLConcatLink />

76
invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
View File

@ -15,23 +15,36 @@ export default function SDXLConcatLink() {
h: 0.5, h: 0.5,
placeContent: 'center', placeContent: 'center',
gap: 2, gap: 2,
px: 2, flexDirection: 'column',
}} }}
> >
<Box <Box
as={motion.div} as={motion.div}
initial={{ initial={{
scaleX: 0, scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
}} }}
animate={{ scaleX: 1, transition: { duration: 0.3 } }}
sx={{ sx={{
bg: 'accent.300', position: 'absolute',
h: 0.5, top: '1px',
bg: 'none',
w: 'full', w: 'full',
borderRadius: 9999, minH: 2,
transformOrigin: 'right', borderTop: 'none',
borderTopRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: { _dark: {
bg: 'accent.500', borderColor: 'accent.600',
}, },
}} }}
/> />
@ -39,30 +52,57 @@ export default function SDXLConcatLink() {
as={motion.div} as={motion.div}
initial={{ initial={{
opacity: 0, opacity: 0,
scale: 0,
rotate: 0,
}} }}
animate={{ animate={{
opacity: 1, rotate: 360,
transition: { duration: 0.3 }, opacity: [0, 1, 1, 1],
scale: [0, 0.75, 1.5, 1],
transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
}}
sx={{
zIndex: 3,
position: 'absolute',
left: '48%',
top: '3px',
p: 1,
borderRadius: 4,
bg: 'accent.200',
_dark: {
bg: 'accent.500',
},
}} }}
zIndex={2}
mt={-1.5}
> >
<FaLink color="var(--invokeai-colors-accent-400)" /> <FaLink size={12} />
</Box> </Box>
<Box <Box
as={motion.div} as={motion.div}
initial={{ initial={{
scaleX: 0, scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
}} }}
animate={{ scaleX: 1, transition: { duration: 0.3 } }}
sx={{ sx={{
bg: 'accent.300', position: 'absolute',
h: 0.5, top: '17px',
bg: 'none',
w: 'full', w: 'full',
borderRadius: 9999, minH: 2,
transformOrigin: 'left', borderBottom: 'none',
borderBottomRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: { _dark: {
bg: 'accent.500', borderColor: 'accent.600',
}, },
}} }}
/> />