Back to Browse

Perspective Menu Animation in React Native with Reanimated 2

13.8K views
Jan 7, 2022
19:31

In this tutorial, we’ll learn how to create a Perspective Menu Animation in React Native. We'll use these packages: - react-native-reanimated - react-native-gesture-handler My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/11-menu-perspective How to deal with SafeAreaView? Check this repo: https://github.com/th3rdwave/react-native-safe-area-context How to deal with the useAnimatedGestureHandler hook? Check this video: https://youtu.be/4HUreYYoE6U Here you can find the Expo Vector Icons: https://icons.expo.fyi/ The main concepts we'll explore are: - PanGestureHandler + useAnimatedGestureHandler - interpolate function from Reanimated Chapters: 00:00 Introduction 00:35 Setup 03:00 The PanGestureHandler 06:50 Dealing with Context 09:30 The onEnd callback 11:05 Perspective animation 15:03 borderRadius 15:33 Menu Icon 18:40 GestureHandlerRootView

Download

0 formats

No download links available.

Perspective Menu Animation in React Native with Reanimated 2 | NatokHD