https://github.com/nicoache1/reanimated-2-animations-challenges
React Native animations challenges using the new Reanimated2 API.
https://github.com/nicoache1/reanimated-2-animations-challenges
animations gestures react react-native react-native-redash reanimated2
Last synced: 6 months ago
JSON representation
React Native animations challenges using the new Reanimated2 API.
- Host: GitHub
- URL: https://github.com/nicoache1/reanimated-2-animations-challenges
- Owner: nicoache1
- Created: 2020-12-09T15:41:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-11T20:22:41.000Z (about 4 years ago)
- Last Synced: 2023-11-07T15:03:14.303Z (over 2 years ago)
- Topics: animations, gestures, react, react-native, react-native-redash, reanimated2
- Language: TypeScript
- Homepage:
- Size: 85.2 MB
- Stars: 216
- Watchers: 10
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Animations Showcase
This repo contains a React Native project with animations challenges and examples using the new Reanimated 2 API
[Check Reanimated 2 documentation here.](https://docs.swmansion.com/react-native-reanimated/)
## Challenges
- [Reanimated 2 Example](#reanimated-2-example)
- [Drag And Drop](#drag-and-drop)
- [Toggl](#toggl)
- [Reflectly Color Selection](#reflectly-color-selection)
- [Onboarding Challenge](#onboarding-challenge)
- [Shared element transition](#shared-element-transition)
- [Accordion](#accordion)
- [Custom Tab Bar](#custom-tab-bar)
- [Skate Challenge](#skate-challenge)
- [Spotify Player UI](#spotify-player-ui)
- [Sticky Shapes](#sticky-shapes)
- [Chanel Scroll](#chanel-scroll)
- [Rainbow Charts](#rainbow-charts)
- [Bouncing Ball](#bouncing-ball)
- [Paper Switch](#paper-switch)
- [Folding Cell](#folding-cell)
- [Love Slider](#love-slider)
- [Fancy Switch](#fancy-switch)
- [Menu Button](#menu-button)
- [Wallet](#wallet)
- [Expanding Collection](#expanding-collection)
- [Music App](#music-app)
- [Bezier Slider](#bezier-slider)
- [Floating Menu](#floating-menu)
## Reanimated 2 Example
First example that comes with the library itself
## Drag and Drop
Simple drag and drop
## Toggl
Toggl Tracker inspiration
## Reflectly Color Selection
Reflectly challenge guided by William Candillon in `Can It Be Done in React Native` Season 4
[Reflectly Color Selection](https://www.youtube.com/watch?v=52luoBZC0Uw&t=3201s)
## Onboarding Challenge
Custom onboarding slides challenge
## Shared element transition
Shared element transition guided by William Candillon
[React Native shared element transition](https://www.youtube.com/watch?v=iejTIn9zi0U&t=102s)
## Accordion
Simple accordion list
## Custom Tab Bar
Custom tab bar challenge from Dribbble
[Tab Bar Switches Interaction](https://dribbble.com/shots/14028381-Tab-Bar-Switches-Interaction)
## Skate Challenge
Skate UI challenge from Dribbble
[Skate Challenge](https://dribbble.com/shots/6779026-One-Hour-UI-Challenge-34-Skate-shop)
## Spotify Player UI
Spotify player UI challenge
## Sticky Shapes
Sticky shapes guided by William Candillon
[Sticky shapes](https://www.youtube.com/watch?v=7j4Av7rfl9k&t=5s)
## Chanel Scroll
Chanel Scroll guided by William Candillon in in `Can It Be Done in React Native` Season 4
[Chanel Scroll](https://www.youtube.com/watch?v=ucpoqa2-74s)
## Rainbow Charts
Rainbow Charts guided by William Candillon in in `Can It Be Done in React Native` Season 4
[Rainbow Charts](https://www.youtube.com/watch?v=ucpoqa2-74s)
## Bouncing Ball
Continuous animation of a ball in a soccer field
## Paper Switch
Inspiration from Ramotion and his Paper Switch for SwiftUI
## Folding Cell
Inspiration from Ramotion his Folding Cell for SwiftUI
## Love Slider
Inspiration from [dribbble Love Slider](https://dribbble.com/shots/14642802-Love-Slider)
## Fancy Switch
Inspiration from [dribbble On/Off Switch](https://dribbble.com/shots/14707970-Daily-UI-Challenge-15-On-Off-Switch)
## Fancy Menu Button
Inspiration from [Menu Button Animation](https://dribbble.com/shots/7165554-Menu-Button-Animation)
## Wallet
Inspiration from [2 FREE Touch Gesture Animations, interactions for after effects](https://dribbble.com/shots/6713486-2-FREE-Touch-Gesture-Animations-interactions-for-after-effects)
## Expanding Collection
Inspiration from [Expanding Collection iOS Control](https://dribbble.com/shots/5370722-Expanding-Collection-Optimized-iOS-Control-Open-Source/attachments/5370722-Expanding-Collection-Optimized-iOS-Control-Open-Source?mode=media)
## Music App
Inspiration from [Music App](https://dribbble.com/shots/4260256-Music-App)
## Bezier Slider
Inspiration from [UI Motion Kit](https://dribbble.com/shots/4833779-UI-Motion-kit)
## Floating Menu
Inspiration from [Star Wars : The Mandalorian - Mobile concept design](https://dribbble.com/shots/8915549-Star-Wars-The-Mandalorian-Mobile-concept-design)
## Acknowledgements
- [@wcandillon](https://github.com/wcandillon) for `react-native-redash` and all of your amazing videos and courses.
- [@ramotion](https://github.com/Ramotion)