V

Volodymyr

2 min

A cookbook is not a map of React Native animation

I already write React Native animations for a living. Here is why I still built a catalog that groups them by driver, engine, and pattern.

I spend most weeks inside a motion. A spring. A shared value. A thing that has to feel right on a phone. Then I started collecting animations from the rest of the React Native world. I already had the recipes. I still did not have a map.

A cookbook teaches the how. It does not sort the pile.

I run Make It Animated. That is where I write React Native animation until the timing is honest. Reanimated on the UI thread. Skia when the pixels have to be a program. Gesture Handler when a finger is the clock.

A cookbook is for implementation. You open a file. You read the comments. You steal a spring. That is one job.

The other job is finding the class of thing you are even looking at. Is this a scroll-driven list, a shader, or a marquee you saw in a tweet? Those are not the same search.

Core is the driver

Reanimated is usually the clock. Gesture-driven. Scroll-driven. Keyboard-driven. Sensor-driven. Transition and layout sit here too, and entering and exiting. The question is not "what library". The question is what is pushing the values.

If you skip this shelf, you mix a gyroscope trick with a page transition because they both "move".

Graphics is where it gets weird

Skia. Shaders. SVG. Lottie. Then the heavier ones: Three.js, WebGPU, Filament. This is the shelf I wanted for the tricky stuff. A shader is not a layout animation with extra steps. You can tell from the first frame if you have seen enough of them.

I do not pretend every engine belongs in one tutorial. I put them next to each other so you can see the difference.

Patterns is the name you remember

Marquee. Shimmer. Morph. Parallax. Shared transition. You do not search "translate plus opacity plus delay". You search the word you said out loud when you saw it.

That is why this shelf exists. Discovery. Learning. Then implementation, once you know which pile you are in.

A facet does not write the worklet for you. Some of what I collect is a video of the motion, not code you can paste. Paid kits stay that way.

If you are looking for React Native animations, they live in the Animations filter. New ones land there whenever I find them.