animate

Category: Tools & Productivity | Uploader: JubaKitiashvili | Downloads: 0 | Version: v1.0（Latest）

Implement animations using the ui-designer agent with Reanimated and Gesture Handler

Changelog: Source: GitHub https://github.com/JubaKitiashvili/everything-react-native-expo

Directory Structure

Current level: .claude/skills/animate/

📄 SKILL.md 2.2 KB

SKILL.md

---
name: animate
description: Implement animations using the ui-designer agent with Reanimated and Gesture Handler
---

# /animate — Implement Animations

You are executing the `/animate` command. Use the **ui-designer** agent to implement animations.

## Process

1. **Understand the animation goal** — What should animate? Transition, gesture, layout change, micro-interaction?
2. **Choose the right tool**:
   - **Reanimated** — Complex, performance-critical animations (runs on UI thread)
   - **Animated (built-in)** — Simple opacity/transform (limited, prefer Reanimated)
   - **LayoutAnimation** — Automatic layout transitions
   - **Moti** — Declarative animations with Reanimated under the hood
   - **CSS transitions (NativeWind v5)** — Simple state-driven transitions

3. **Implement with worklets** — Keep animation logic on the UI thread:

```tsx
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
} from 'react-native-reanimated';

const offset = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(offset.value) }],
}));
```

4. **Add gesture interaction** (if applicable):

```tsx
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const pan = Gesture.Pan()
  .onUpdate((e) => {
    offset.value = e.translationX;
  })
  .onEnd(() => {
    offset.value = withSpring(0);
  });
```

5. **Verify performance**:
   - Use `useFrameCallback` or FPS monitor to confirm 60fps
   - Check that worklets don't bridge to JS thread
   - Test on low-end devices

## Animation Patterns Reference

| Pattern | Tool | Example |
|---------|------|---------|
| Fade in/out | `withTiming` + opacity | Screen transitions |
| Spring bounce | `withSpring` | Button press feedback |
| Gesture drag | `Gesture.Pan` + `useAnimatedStyle` | Swipeable cards |
| Shared element | `expo-router` layout animations | Photo gallery to detail |
| Staggered list | `entering`/`exiting` props | List item appearance |
| Scroll-linked | `useAnimatedScrollHandler` | Parallax, collapsing headers |

## Output
- Animation implementation code
- Performance verification notes
- Gesture integration (if applicable)

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

animate

Directory Structure

SKILL.md

Report

Notice