React Native Animations

These are the branch names of each of the code examples. The reason they are on branches vs separate folders is to prevent you from having to keep installing React Native and all dependencies.

To access a demo just clone this repo. git clone git@gitlab.com:codedaily/reactnativeanimations.git

Once cloned do git checkout [branchname]

For example git checkout timing for the first code demo. Follow along with the getting setup video if you are having any issues.

Additionally each of these is a link to the code on gitlab if you would like to view the code online.

If you've made modifications and it will not let you check out another demo just run the command git reset --hard. This will reset everything, so be warned if you have pieces of a demo you have modified and want to keep.

Intro

• Understanding Internals

Animating Properties

timingOpacity timingTranslate timingScale timingWidthHeight timingAbsolute timingColor timingRotation timingWidthHeightPercentage

Easing

timingWithEasing

Animated Functions

timing spring loop parallel sequence [stagger]((https://gitlab.com/codedaily/reactnativeanimations/tree/stagger) delay decay event add divide modulo multiply createAnimatedComponent

Combining Animations

parallel sequence stagger delay

Interpolation

interpolateNumber interpolateColors interpolateRotation interpolateExtrapolate mixedExtrapolate

Using Native Driver

timingNative springNative scrollNative

Gestures and Animations

decay kittenCards staggerHeads

Understand and Build Custom Animations

• How createAnimatedComponent works - no git branch here

• How to use setNativeProps

• Using d3-interpolate with Animated

• Animating SVG paths w/ d3-interpolate-path and Animated

• Animating SVG paths w/ Art and Animated

• Animating SVG paths w/ Flubber and Animated

Techniques

• .99 cliff
• Animating Components Away
• Interrupted Animations
• pointerEvents

Basic Real World

• Animate to the 4 corners
• Kitten Card Swiper

• Staggered Head Drag

• Animated Button with Progress Bar - https://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/

• Stagger Form Field Visibility

• Dynamic Animated Notification

• Animated Questionnaire - https://uimovement.com/ui/3214/questionnaire/

Advanced Real World

• Photo Grid Shared Elements
• Floating Button Menu with Background Cover
• App Intro
• Animated Color Picker Bar - https://uimovement.com/ui/304/text-editor-animation/
• Evolving Write Button - https://uimovement.com/ui/2649/writer/