https://github.com/nadikuts/react-native-animated-menu

Top-down animated menu transition concept
https://github.com/nadikuts/react-native-animated-menu

animated concept menu react-native uplabs

Last synced: 2 months ago
JSON representation

Top-down animated menu transition concept

• Host: GitHub
• URL: https://github.com/nadikuts/react-native-animated-menu
• Owner: NadiKuts
• Created: 2017-08-19T20:54:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-19T22:26:36.000Z (almost 8 years ago)
• Last Synced: 2025-03-27T02:12:09.239Z (3 months ago)
• Topics: animated, concept, menu, react-native, uplabs
• Language: JavaScript
• Homepage: https://expo.io/@devilsanek/animated-menu
• Size: 39.7 MB
• Stars: 58
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Animated Menu Transition

Concept for animated top-down menu transition implemented with React Native

[Expo Demo](https://expo.io/@devilsanek/animated-menu)

Inspired by: https://www.uplabs.com/posts/relate-ux-parallax-scrolling-sidemenu-1

|      Original design      |  Implementation        |

| ------------------------- |:-----------------------:|

| ![Output sample](preview.gif)|![Output sample](implementation.gif) |

### Instructions

- [Install NodeJS](https://nodejs.org/en/)

- [Install and setup React Native](https://facebook.github.io/react-native/docs/getting-started.html)

- Clone repository: `git clone https://github.com/NadiKuts/react-native-animated-menu.git`

- Navigate to the created folder: `cd react-native-animated-menu`

- To run on either iPhone or Android check this page: https://github.com/react-community/create-react-native-app#creating-an-app

### Demo

Install Expo App on your [Android smartphone](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www) or [iPhone](https://itunes.apple.com/app/apple-store/id982107779?ct=www&mt=8).

Scan this QR-code with your Expo App. 

![alt text](https://github.com/NadiKuts/react-native-animated-menu/blob/master/assets/qr-code.png)

... or go [here](https://expo.io/@devilsanek/animated-menu) and try it out!