nicoache1 / reanimated-2-animations-challenges

React Native animations challenges using the new Reanimated2 API.

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.

Challenges

• Reanimated 2 Example
• Drag And Drop
• Toggl
• Reflectly Color Selection
• Onboarding Challenge
• Shared element transition
• Accordion
• Custom Tab Bar
• Skate Challenge
• Spotify Player UI
• Sticky Shapes
• Chanel Scroll
• Rainbow Charts
• Bouncing Ball
• Paper Switch
• Folding Cell
• Love Slider
• Fancy Switch
• Menu Button
• Wallet
• Expanding Collection
• Music App
• Bezier Slider
• 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

Onboarding Challenge

Custom onboarding slides challenge

Shared element transition

Shared element transition guided by William Candillon React Native shared element transition

Accordion

Simple accordion list

Custom Tab Bar

Custom tab bar challenge from Dribbble Tab Bar Switches Interaction

Skate Challenge

Skate UI challenge from Dribbble Skate Challenge

Spotify Player UI

Spotify player UI challenge

Sticky Shapes

Sticky shapes guided by William Candillon Sticky shapes

Chanel Scroll

Chanel Scroll guided by William Candillon in in Can It Be Done in React Native Season 4 Chanel Scroll

Rainbow Charts

Rainbow Charts guided by William Candillon in in Can It Be Done in React Native Season 4 Rainbow Charts

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

Fancy Switch

Inspiration from dribbble On/Off Switch

Fancy Menu Button

Inspiration from Menu Button Animation

Wallet

Inspiration from 2 FREE Touch Gesture Animations, interactions for after effects

Expanding Collection

Inspiration from Expanding Collection iOS Control

Music App

Inspiration from Music App

Bezier Slider

Inspiration from UI Motion Kit

Floating Menu

Inspiration from Star Wars : The Mandalorian - Mobile concept design

Acknowledgements

• @wcandillon for react-native-redash and all of your amazing videos and courses.
• @ramotion