diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx index e28a0e884f..2a0a4e4d06 100644 --- a/src/lib/hooks/useMinimalShellMode.tsx +++ b/src/lib/hooks/useMinimalShellMode.tsx @@ -7,21 +7,22 @@ export function useMinimalShellMode() { const store = useStores() const minimalShellInterp = useAnimatedValue(0) const footerMinimalShellTransform = { - transform: [{translateY: Animated.multiply(minimalShellInterp, 100)}], + opacity: Animated.subtract(1, minimalShellInterp), + transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}], } React.useEffect(() => { if (store.shell.minimalShellMode) { Animated.timing(minimalShellInterp, { toValue: 1, - duration: 100, + duration: 150, useNativeDriver: true, isInteraction: false, }).start() } else { Animated.timing(minimalShellInterp, { toValue: 0, - duration: 100, + duration: 150, useNativeDriver: true, isInteraction: false, }).start() diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx index e39e2dd68d..ad1a69cf67 100644 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ b/src/view/com/pager/FeedsTabBarMobile.tsx @@ -24,13 +24,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl( React.useEffect(() => { Animated.timing(interp, { toValue: store.shell.minimalShellMode ? 1 : 0, - duration: 100, + duration: 150, useNativeDriver: true, isInteraction: false, }).start() }, [interp, store.shell.minimalShellMode]) const transform = { - transform: [{translateY: Animated.multiply(interp, -100)}], + opacity: Animated.subtract(1, interp), + transform: [{translateY: Animated.multiply(interp, -50)}], } const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)