animation trained

mental model

Motion explains state, feedback, or spatial relationship. Choose CSS/WAAPI for a local web state change, a project-selected library only for real sequencing or gesture state, and Reanimated for React Native UI-runtime work. Respect prefers-reduced-motion at implementation time.

examples

@media (prefers-reduced-motion: no-preference) {
  .menu[data-open="true"] { animation: menu-in 160ms cubic-bezier(.2,.8,.2,1); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

For React Compiler-safe Reanimated shared values, use get() and set(). Official source

best practices

Name the transition before selecting an API.
Keep keyboard and repeated interactions immediate.
Verify feel on the actual supported browser or device.

strengths

Motion clarifies hierarchy and direct manipulation; CSS/WAAPI keep small web transitions local and Reanimated keeps supported continuous work out of React rendering.

weaknesses / pain points

Motion adds latency, can cause discomfort, and is device-dependent.

gotchas

Shared-value reads and writes during React render are side effects; keep them in callbacks or effects. Official source
A browser or simulator preview does not prove device performance.

known bugs

No version-specific defect is recorded. Add an upstream issue, affected release, and workaround only after observing it.

troubleshooting

symptom	root cause	fix
a menu feels slow	motion competes with a repeated task	shorten it or remove motion
gesture stutters	per-frame work reaches React state	keep continuous values in Reanimated and commit semantic state at the end
reduced motion is ignored	alternate path was deferred	gate the transition immediately

practiced cases

the shared-value semantics above were verified against the official Reanimated 4 documentation; no application runtime was in scope.

routing

animate builds for web; animate-expo builds for React Native/Expo. animation-vocabulary names an effect. The find, improve, and review guides are read-only analysis.