From f7f653c948bf5860c814a158192544515ee81207 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 14 Dec 2023 13:53:05 -0600 Subject: [PATCH] Simplify --- src/Splash.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/Splash.tsx b/src/Splash.tsx index 622a0fb2cc..5dcd2ec6c2 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -27,13 +27,8 @@ export function Splash(props: React.PropsWithChildren) { const outroApp = useSharedValue(0) const [isAnimationComplete, setIsAnimationComplete] = React.useState(false) - const logoFadeInAnimation = useAnimatedStyle(() => { + const logoAnimations = useAnimatedStyle(() => { return { - /* - * N.B. these two transforms _compound_, just like with CSS. The first - * handles the intro animation at 1:1 scale (1000 px), the second scales - * down by 10x to 100px to get a natural looking 100px wide logo. - */ transform: [ { scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'), @@ -42,7 +37,7 @@ export function Splash(props: React.PropsWithChildren) { scale: interpolate( outroLogo.value, [0, 0.08, 0.1, 1], - [0.1, 0.08, 0.08, 80], + [1, 0.8, 0.8, 800], 'clamp', ), }, @@ -117,9 +112,10 @@ export function Splash(props: React.PropsWithChildren) { flex: 1, justifyContent: 'center', alignItems: 'center', + transform: [{scale: 0.1}], // scale from 1000px to 100px }, ]}> - + }> {!isAnimationComplete && (