https://github.com/aashu-dubey/react-native-animation-samples
Gesture based interruptible animation samples in React Native.
https://github.com/aashu-dubey/react-native-animation-samples
android animation gesture gesture-handler ios react react-native reanimated samples toolbar
Last synced: about 1 month ago
JSON representation
Gesture based interruptible animation samples in React Native.
- Host: GitHub
- URL: https://github.com/aashu-dubey/react-native-animation-samples
- Owner: Aashu-Dubey
- License: mit
- Created: 2022-06-18T17:52:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-08T17:12:15.000Z (2 months ago)
- Last Synced: 2025-03-31T04:04:01.079Z (about 2 months ago)
- Topics: android, animation, gesture, gesture-handler, ios, react, react-native, reanimated, samples, toolbar
- Language: TypeScript
- Homepage:
- Size: 2.14 MB
- Stars: 284
- Watchers: 5
- Forks: 37
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Native Animation Samples
Some very interesting and challenging animation samples built in react-native
## 🧬 Samples
| Project | |
| :--- | --- |
| **[> Expo Snack](https://snack.expo.dev/@ashu_dubey/react-native-animation-samples)**
**[> YouTube Tutorial Playlist](https://www.youtube.com/playlist?list=PLpnMM6hhRcchaS1uSpMZfAKYTxZWIlzzN)** | |
|
1. Custom Toolbar
**[> YouTube Tutorial](https://youtu.be/27pTWrcEDC4)**
A Custom playful, interactive toolbar with cool gesture based interruptible animations.
**[> Browse](./src/samples/custom_toolbar#readme)**
**> Demo: [twitter](https://twitter.com/aashudubey_ad/status/1539354978266935296) \| youtube [short 1](https://youtube.com/shorts/i7xw93xqkRE), [short 2](https://youtube.com/shorts/QMt18WcWyGw)** | 
|
| 2. Color Swatch
**[> YouTube Tutorial](https://youtu.be/lK6rAktDQJQ)**
A Color Swatch that plays a circular rotation based on user gestures.
**[> Browse](./src/samples/color_swatch#readme)**
**> Demo: [twitter](https://twitter.com/aashudubey_ad/status/1545139506457690112) \| [youtube](https://youtube.com/shorts/2dhPPNeOc1I)** | 
|
| 3. Grid Magnification
A grid list view that displays Magnify effect on long press & drag, focusing on the items near the touch area within a radius.
**[> Browse](./src/samples/grid_magnification#readme)**
**> Demo: [twitter](https://twitter.com/aashudubey_ad/status/1553434985620656128)**
**> Alternatives: [Flutter](https://github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/animations/grid_magnification)** | 
|
| 4. Rope Physics
A realistic looking gesture controlled, bezier based Rope UI implementation and related samples.
**[> Browse](./src/samples/rope_physics#readme)**
**> Demo: [twitter](https://twitter.com/aashudubey_ad/status/1571250425772544000)** | 
|
| 5. Custom Cursor/Caret
A Customizable custom cursor/caret for TextFields, with intuitive validation animations for max length and password strength.
**[> Browse](./src/samples/custom_caret#readme)**
**> Demo: twitter ([max length](https://twitter.com/aashudubey_ad/status/1696987518548496526) \| [password strength](https://twitter.com/aashudubey_ad/status/1697353400583942423))**
**> Alternatives: [Flutter](https://github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/animations/custom_caret)** | 
|
## 🧬 Other samples (Incomplete) 🚧
- [Cards Swap](https://github.com/Aashu-Dubey/react-native-animation-samples/tree/cards_swap/src/cards_swap):- A drag/swipe demo where the cards dodge each other with gesture based animations. [See preview](https://twitter.com/aashudubey_ad/status/1543701552820469760)
## 🖥 Running locally
```bash
# after clone, cd into the directory
# install dependencies
yarn install
# iOS only
npx pod-install ios
# or
cd ios && pod install && cd ..
# Run iOS
npx react-native run-ios
# Run Android
npx react-native run-android
```