V

Volodymyr

3 min

Parallax, shimmer, and stagger are animation pattern names

I say parallax, shimmer, and stagger out loud before I ever name a library. Those names sit next to the driver and the engine.

The product shelf is supposed to load soft, then land. Cards shimmer while the feed arrives. They stagger into place. A little parallax peeks the next card when you scroll. Nobody on the ticket said "Reanimated shared value" or "Skia rect." They said the nicknames. I started keeping those recipes in their own pile because burying them under drivers or painters hid the search I actually do.

The recipe is the word you already used

Pull that shelf apart and the first layer is language. Shimmer means a loading pulse that pretends content is almost there. Stagger means children enter on a delay so the list feels intentional. Parallax means layers move at different rates so depth shows up without a 3D engine. Morph, ripple, marquee, scale, translate, rotate, fluid, physics, drag-drop, shared-transition — same idea. Each name is a motion contract a designer or PM can say without picking a package.

That is Patterns. Discovery by nickname. You remember what the motion felt like, not which npm line painted it.

Core only owns the numbers

Under every recipe sits a driver. react-native-reanimated usually holds the clock: a shared value climbs, a scroll position maps into opacity, a gesture owns progress. Entering and exiting, layout, scroll-driven, gesture-driven — that is Core. It answers what is pushing the value.

A staggered enter is often just delays on the same opacity spring. A parallax peek is scroll position multiplied by a factor per layer. Translate and scale are the cheap transforms those values land on. The driver does not care whether you called the result shimmer or stagger. It only moves numbers on the UI thread.

When people say "just do it in Reanimated," they are naming Core and skipping the recipe. Useful. Incomplete.

Graphics is optional paint on top

Some recipes never leave Views. A shimmer can be opacity on a gray block. A ripple can be a scaling circle under a press. Others want a painter: a Shader wash across a rect, a Skia path that morphs, a Lottie timeline the designer already shipped. That is Graphics — engines that draw.

The pattern name still does not tell you which engine painted it. A morph might be Skia paths driven by Reanimated, or a designed composition runtime. A fluid look might be Matter.js bodies, or clever transforms. Patterns and Graphics answer different questions. Nickname versus painter. Mixing them into one "cool motion" bucket is how you spend an afternoon in the wrong layer.

Why the three shelves stay split

Core, Graphics, Patterns — three cuts of the same animation catalog. Drivers. Engines. Recipes. I do not flatten them, because the ticket and the search start in different places.

Sometimes you know you need a spring and a gesture. That is Core. Sometimes you remember a canvas logo that caught light. That is Graphics. Sometimes you only remember "the cards did that soft stagger." That is Patterns. Same catalog. Different door.

The hard part is rarely inventing the motion from zero. It is remembering which preview had the honest shimmer that did not fight the keyboard, or the shared transition that survived a real navigation stack. Video helps the memory. Separate groups keep the nickname from drowning in drivers and painters.

This is the shelf

Everything I keep for those named recipes lives in the Patterns group. New parallax, shimmer, stagger, morph, ripple, and friends land there whenever I find them.