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

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

@ -15,23 +15,36 @@ export default function SDXLConcatLink() {
h: 0.5,
placeContent: 'center',
gap: 2,
px: 2,
flexDirection: 'column',
}}
>
<Box
as={motion.div}
initial={{
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={{
bg: 'accent.300',
h: 0.5,
position: 'absolute',
top: '1px',
bg: 'none',
w: 'full',
borderRadius: 9999,
transformOrigin: 'right',
minH: 2,
borderTop: 'none',
borderTopRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: {
bg: 'accent.500',
borderColor: 'accent.600',
},
}}
/>
@ -39,30 +52,57 @@ export default function SDXLConcatLink() {
as={motion.div}
initial={{
opacity: 0,
scale: 0,
rotate: 0,
}}
animate={{
opacity: 1,
transition: { duration: 0.3 },
rotate: 360,
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
as={motion.div}
initial={{
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={{
bg: 'accent.300',
h: 0.5,
position: 'absolute',
top: '17px',
bg: 'none',
w: 'full',
borderRadius: 9999,
transformOrigin: 'left',
minH: 2,
borderBottom: 'none',
borderBottomRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: {
bg: 'accent.500',
borderColor: 'accent.600',
},
}}
/>