Skip to content

Latest commit

 

History

History
111 lines (81 loc) · 6.7 KB

README.md

File metadata and controls

111 lines (81 loc) · 6.7 KB

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 [email protected]: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

Techniques

Basic Real World

Advanced Real World