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