{"id":35000853,"url":"https://github.com/nicoache1/reanimated-2-animations-challenges","last_synced_at":"2025-12-27T03:46:26.601Z","repository":{"id":41554860,"uuid":"320002348","full_name":"nicoache1/reanimated-2-animations-challenges","owner":"nicoache1","description":"React Native animations challenges using the new Reanimated2 API.","archived":false,"fork":false,"pushed_at":"2022-05-11T20:22:41.000Z","size":89369,"stargazers_count":216,"open_issues_count":0,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2023-11-07T15:03:14.303Z","etag":null,"topics":["animations","gestures","react","react-native","react-native-redash","reanimated2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicoache1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-09T15:41:13.000Z","updated_at":"2023-11-02T15:40:45.000Z","dependencies_parsed_at":"2022-08-10T02:50:23.880Z","dependency_job_id":null,"html_url":"https://github.com/nicoache1/reanimated-2-animations-challenges","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/nicoache1/reanimated-2-animations-challenges","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicoache1%2Freanimated-2-animations-challenges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicoache1%2Freanimated-2-animations-challenges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicoache1%2Freanimated-2-animations-challenges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicoache1%2Freanimated-2-animations-challenges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicoache1","download_url":"https://codeload.github.com/nicoache1/reanimated-2-animations-challenges/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicoache1%2Freanimated-2-animations-challenges/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28071568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-27T02:00:05.897Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","gestures","react","react-native","react-native-redash","reanimated2"],"created_at":"2025-12-27T03:46:26.069Z","updated_at":"2025-12-27T03:46:26.595Z","avatar_url":"https://github.com/nicoache1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Animations Showcase\n\nThis repo contains a React Native project with animations challenges and examples using the new Reanimated 2 API\n\n[Check Reanimated 2 documentation here.](https://docs.swmansion.com/react-native-reanimated/)\n\n## Challenges\n\n- [Reanimated 2 Example](#reanimated-2-example)\n- [Drag And Drop](#drag-and-drop)\n- [Toggl](#toggl)\n- [Reflectly Color Selection](#reflectly-color-selection)\n- [Onboarding Challenge](#onboarding-challenge)\n- [Shared element transition](#shared-element-transition)\n- [Accordion](#accordion)\n- [Custom Tab Bar](#custom-tab-bar)\n- [Skate Challenge](#skate-challenge)\n- [Spotify Player UI](#spotify-player-ui)\n- [Sticky Shapes](#sticky-shapes)\n- [Chanel Scroll](#chanel-scroll)\n- [Rainbow Charts](#rainbow-charts)\n- [Bouncing Ball](#bouncing-ball)\n- [Paper Switch](#paper-switch)\n- [Folding Cell](#folding-cell)\n- [Love Slider](#love-slider)\n- [Fancy Switch](#fancy-switch)\n- [Menu Button](#menu-button)\n- [Wallet](#wallet)\n- [Expanding Collection](#expanding-collection)\n- [Music App](#music-app)\n- [Bezier Slider](#bezier-slider)\n- [Floating Menu](#floating-menu)\n\n## Reanimated 2 Example\n\nFirst example that comes with the library itself\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/firstExample.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Drag and Drop\n\nSimple drag and drop\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/dragAndDrop.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Toggl\n\nToggl Tracker inspiration\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/toggl.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Reflectly Color Selection\n\nReflectly challenge guided by William Candillon in `Can It Be Done in React Native` Season 4\n[Reflectly Color Selection](https://www.youtube.com/watch?v=52luoBZC0Uw\u0026t=3201s)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/reflectly.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Onboarding Challenge\n\nCustom onboarding slides challenge\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/onboarding.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Shared element transition\n\nShared element transition guided by William Candillon\n[React Native shared element transition](https://www.youtube.com/watch?v=iejTIn9zi0U\u0026t=102s)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/sharedElement.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Accordion\n\nSimple accordion list\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/accordion.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Custom Tab Bar\n\nCustom tab bar challenge from Dribbble\n[Tab Bar Switches Interaction](https://dribbble.com/shots/14028381-Tab-Bar-Switches-Interaction)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/customTabBar.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Skate Challenge\n\nSkate UI challenge from Dribbble\n[Skate Challenge](https://dribbble.com/shots/6779026-One-Hour-UI-Challenge-34-Skate-shop)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/skateChallenge.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Spotify Player UI\n\nSpotify player UI challenge\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/spotify.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Sticky Shapes\n\nSticky shapes guided by William Candillon\n[Sticky shapes](https://www.youtube.com/watch?v=7j4Av7rfl9k\u0026t=5s)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/stickyShapes.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Chanel Scroll\n\nChanel Scroll guided by William Candillon in in `Can It Be Done in React Native` Season 4\n[Chanel Scroll](https://www.youtube.com/watch?v=ucpoqa2-74s)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/chanelScroll.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Rainbow Charts\n\nRainbow Charts guided by William Candillon in in `Can It Be Done in React Native` Season 4\n[Rainbow Charts](https://www.youtube.com/watch?v=ucpoqa2-74s)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/rainbowCharts.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Bouncing Ball\n\nContinuous animation of a ball in a soccer field\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/bouncingBall.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Paper Switch\n\nInspiration from Ramotion and his Paper Switch for SwiftUI\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/paperSwitch.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Folding Cell\n\nInspiration from Ramotion his Folding Cell for SwiftUI\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/foldingCell.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Love Slider\n\nInspiration from [dribbble Love Slider](https://dribbble.com/shots/14642802-Love-Slider)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/loveSlider.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Fancy Switch\n\nInspiration from [dribbble On/Off Switch](https://dribbble.com/shots/14707970-Daily-UI-Challenge-15-On-Off-Switch)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/fancySwitch.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Fancy Menu Button\n\nInspiration from [Menu Button Animation](https://dribbble.com/shots/7165554-Menu-Button-Animation)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/menuButton.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Wallet\n\nInspiration from [2 FREE Touch Gesture Animations, interactions for after effects](https://dribbble.com/shots/6713486-2-FREE-Touch-Gesture-Animations-interactions-for-after-effects)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/cards.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Expanding Collection\n\nInspiration 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)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/expandingCollection.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Music App\n\nInspiration from [Music App](https://dribbble.com/shots/4260256-Music-App)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/musicApp.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Bezier Slider\n\nInspiration from [UI Motion Kit](https://dribbble.com/shots/4833779-UI-Motion-kit)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/bezierSlider.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Floating Menu\n\nInspiration from [Star Wars : The Mandalorian - Mobile concept design](https://dribbble.com/shots/8915549-Star-Wars-The-Mandalorian-Mobile-concept-design)\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cimg src=\"./Season1/src/assets/examples/mandalorian.gif\" width=\"200\" height=\"450\"  /\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n## Acknowledgements\n\n- [@wcandillon](https://github.com/wcandillon) for `react-native-redash` and all of your amazing videos and courses.\n- [@ramotion](https://github.com/Ramotion)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicoache1%2Freanimated-2-animations-challenges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicoache1%2Freanimated-2-animations-challenges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicoache1%2Freanimated-2-animations-challenges/lists"}