Animations

by software-mansion-labse3f00cdb3494No license291 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, CSS pseudo-selectors, CSS callbacks, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.

Instructions onlySoftware Development Design & Creative

AI-generated overview

Reference patterns for building production animations in React Native with Reanimated 4, Skia, WebGPU and TypeGPU.

What it does: This skill supplies guidance and reference material for animating user interfaces in React Native. It covers CSS transitions and animations, shared value animations, layout and scroll-driven animations, canvas and sprite animation with Skia, GPU shader work with WebGPU and TypeGPU, plus performance tuning and accessibility. It is documentation only and produces no files or code artifacts of its own.
When to use it: Use it when writing or reviewing React Native animation code, such as choosing between CSS transitions and shared values, or implementing layout, scroll, canvas, SVG or GPU shader animations. It also applies when diagnosing animation performance or reduced-motion accessibility.
Requirements: Requires a React Native project using Reanimated 4 and the New Architecture; some topics assume react-native-skia, react-native-wgpu, TypeGPU or Three.js. It reads the installed Reanimated version from node_modules or the lockfile and may fetch linked documentation pages over the network. No scripts are shipped.

Animations

Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.

Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.

Version Check

Read the installed Reanimated version before writing animation code: node_modules/react-native-reanimated/package.json or the lockfile, not the package.json range. Reanimated 3.x has no CSS transitions or animations; use shared values there. On 4.x, a feature used below the version that added it (table in animations.md) is silently ignored or throws: do not emit it, and if the user asked for that feature, say which version adds it.

Critical Rules

NEVER use runOnJS. It is removed in Reanimated 4. Use scheduleOnRN(fn, ...args) from react-native-worklets instead. This applies everywhere: scroll handlers, gesture callbacks, useAnimatedReaction, useFrameCallback, and any other worklet context.

References

File	When to read
`animations.md`	Choosing between CSS transitions, CSS animations, and shared value animations; CSS feature availability by Reanimated version; CSS transition and CSS animation patterns and rules; CSS callbacks (`onCSS*`, 4.6.0+); animating text; infinite animation cleanup; `scheduleOnRN`
`css-pseudo-selectors.md`	Interaction state without React state: `:hover`, `:active`, `:active-deepest`, `:focus`, `:focus-within` (4.5.0+), selector precedence, the property lock, per-platform press traps
`animation-functions.md`	Gotchas and rules for core hooks (`useSharedValue`, `useAnimatedStyle`, `useAnimatedProps`, `useDerivedValue`); `withSpring` config modes; `withRepeat` and `withClamp` caveats; composing animations
`layout-animations.md`	Entering/exiting animation gotchas (`nativeID` conflict, view flattening); layout transitions; keyframe animation rules; list item animations (`itemLayoutAnimation`); shared element transitions
`scroll-and-events.md`	Scroll-driven animation patterns (`useAnimatedScrollHandler`, `scrollTo`, `useScrollOffset`); `useAnimatedReaction` patterns; `useFrameCallback`; `measure` rules
`canvas-animations.md`	Canvas animations with `@shopify/react-native-skia`; Reanimated integration (shared values as direct props); `interpolateColors`; retained vs immediate mode (Picture API); path animations (`usePathInterpolation`, `usePathValue`); `useClock`; gesture integration and element tracking; SKSL runtime shaders and image filters; textures
`canvas-atlas.md`	Atlas for batched sprite/tile animation; `useTexture`, `useRSXformBuffer`; RSXform matrix format (`[scos, ssin, tx, ty]`)
`gpu-animations.md`	GPU shader animations; `react-native-wgpu` Canvas and device setup; TypeGPU typed pipelines; Reanimated + WebGPU worklet integration; compute pipelines for particle systems, physics, and simulations; `@typegpu/noise` (Perlin noise, PRNG); `@typegpu/sdf` (signed distance shapes); Three.js / React Three Fiber for 3D
`svg-animations.md`	Animating SVG elements and paths with Reanimated; `createAnimatedComponent` for SVG; progress arcs; pulsing circles
`animations-performance.md`	Performance tuning; 120fps setup; feature flags; FPS drop fixes; simultaneous animation limits; accessibility (`useReducedMotion`, `ReducedMotionConfig`); worklet closure optimization; debug vs release builds

Source and attribution

Source:software-mansion-labs/skillsinskills/react-native-best-practices/references/animationsat commite3f00cd

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Animations

Animations

Version Check

Critical Rules

References

Source and attribution

More from software-mansion-labs/skills

Svg

Rich Text

Jsi

Gestures

Enable Worklets Bundle Mode

Audio

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices