diff options
| author | Paul Frazee <pfrazee@gmail.com> | 2022-11-01 10:02:24 -0500 |
|---|---|---|
| committer | Paul Frazee <pfrazee@gmail.com> | 2022-11-01 10:02:24 -0500 |
| commit | 6329ab4b080db417d5577ddc5116501ee2d921d8 (patch) | |
| tree | 80e64bd9aabdfa8854f34425d720a092446e596f /src | |
| parent | d0b94d7570977b1f9030f24a57e2daceaa49e48f (diff) | |
| download | voidsky-6329ab4b080db417d5577ddc5116501ee2d921d8.tar.zst | |
Improve animation jitter in main menu
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/shell/mobile/MainMenu.tsx | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx index 4fc9a09f0..1532d5a8a 100644 --- a/src/view/shell/mobile/MainMenu.tsx +++ b/src/view/shell/mobile/MainMenu.tsx @@ -40,7 +40,7 @@ export const MainMenu = observer( opacity: interpolate(initInterp.value, [0, 1.0], [0, 1.0]), })) const menuItemsAnimStyle = useAnimatedStyle(() => ({ - marginTop: interpolate(initInterp.value, [0, 1.0], [15, 0]), + top: interpolate(initInterp.value, [0, 1.0], [15, 0]), })) // events @@ -154,7 +154,12 @@ export const MainMenu = observer( /> </TouchableOpacity> </View> - <Animated.View style={[styles.section, menuItemsAnimStyle]}> + <Animated.View + style={[ + styles.section, + styles.menuItemsAnimContainer, + menuItemsAnimStyle, + ]}> <View style={[styles.menuItems]}> <MenuItem icon="home" label="Home" url="/" /> <MenuItem @@ -217,8 +222,9 @@ const styles = StyleSheet.create({ topSection: { flexDirection: 'row', alignItems: 'center', + height: 40, paddingHorizontal: 10, - paddingBottom: 10, + marginBottom: 10, }, section: { paddingHorizontal: 10, @@ -251,6 +257,9 @@ const styles = StyleSheet.create({ marginRight: 10, }, + menuItemsAnimContainer: { + position: 'relative', + }, menuItems: { flexDirection: 'row', marginBottom: 20, |