Animations
software-mansion-labs/skills/skills/react-native-best-practices/references/animationsby 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.
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| animation-functions.md | 7.1 KB | text/markdown |
| animations.md | 22.1 KB | text/markdown |
| animations-performance.md | 5.8 KB | text/markdown |
| canvas-animations.md | 14.3 KB | text/markdown |
| canvas-atlas.md | 2.4 KB | text/markdown |
| css-pseudo-selectors.md | 4.1 KB | text/markdown |
| gpu-animations.md | 10.9 KB | text/markdown |
| layout-animations.md | 5.6 KB | text/markdown |
| scroll-and-events.md | 6 KB | text/markdown |
| SKILL.md | 4.4 KB | text/markdown |
| svg-animations.md | 2.2 KB | text/markdown |
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.
More from software-mansion-labs/skills
Svg
software-mansion-labs
Guides SVG rendering in React Native apps using the react-native-svg library.
Rich Text
software-mansion-labs
Guides building rich text editors and HTML or Markdown renderers in React Native using Software Mansion's enriched libraries.
Jsi
software-mansion-labs
Reference guidance for writing React Native JSI C++ code that bridges native code and the JavaScript engine.
Gestures
software-mansion-labs
Best practices for implementing touch gestures in React Native apps with React Native Gesture Handler.
Enable Worklets Bundle Mode
software-mansion-labs
Enables react-native-worklets Bundle Mode in a React Native or Expo app, including the required metro patches.
Audio
software-mansion-labs
Best-practice guidance for implementing audio playback, recording, effects and analysis in React Native apps.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.