JubaKitiashvili/animate

/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:

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):

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)