Cursor rule

1---
2alwaysApply: false
3---
4 
5## Animate Transform and Opacity Instead of Layout Properties
6 
7Avoid animating `width`, `height`, `top`, `left`, `margin`, or `padding`. These trigger layout recalculation on every frame. Instead, use `transform` (scale, translate) and `opacity` which run on the GPU without triggering layout.
8 
9**Incorrect (animates height, triggers layout every frame):**
10 
11```tsx
12import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
13 
14function CollapsiblePanel({ expanded }: { expanded: boolean }) {
15  const animatedStyle = useAnimatedStyle(() => ({
16    height: withTiming(expanded ? 200 : 0), // triggers layout on every frame
17    overflow: 'hidden',
18  }))
19 
20  return <Animated.View style={animatedStyle}>{children}</Animated.View>
21}
22```
23 
24**Correct (animates scaleY, GPU-accelerated):**
25 
26```tsx
27import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
28 
29function CollapsiblePanel({ expanded }: { expanded: boolean }) {
30  const animatedStyle = useAnimatedStyle(() => ({
31    transform: [
32      { scaleY: withTiming(expanded ? 1 : 0) },
33    ],
34    opacity: withTiming(expanded ? 1 : 0),
35  }))
36 
37  return (
38    <Animated.View style={[{ height: 200, transformOrigin: 'top' }, animatedStyle]}>
39      {children}
40    </Animated.View>
41  )
42}
43```
44 
45**Correct (animates translateY for slide animations):**
46 
47```tsx
48import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
49 
50function SlideIn({ visible }: { visible: boolean }) {
51  const animatedStyle = useAnimatedStyle(() => ({
52    transform: [
53      { translateY: withTiming(visible ? 0 : 100) },
54    ],
55    opacity: withTiming(visible ? 1 : 0),
56  }))
57 
58  return <Animated.View style={animatedStyle}>{children}</Animated.View>
59}
60```
61 
62GPU-accelerated properties: `transform` (translate, scale, rotate), `opacity`. Everything else triggers layout.
63