0
# Animated Components
1

2
Core animated DOM elements supporting all HTML and SVG tags with spring-powered animations. All standard DOM elements can be animated using the `animated` namespace.
3

4
## Capabilities
5

6
### Animated Function
7

8
Creates animated versions of React components with spring animation support.
9

10
```typescript { .api }
11
/**
12
 * Creates an animated version of a React component
13
 * @param component - React component or HTML tag name
14
 * @returns Animated component with spring animation capabilities
15
 */
16
function animated<T extends ElementType>(component: T): AnimatedComponent<T>;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import { animated } from "@react-spring/web";
23

24
// Animate custom components
25
const AnimatedCustomComponent = animated(MyComponent);
26

27
// Use animated custom component
28
<AnimatedCustomComponent style={{ opacity: springValue }} />
29
```
30

31
### HTML Element Primitives
32

33
All standard HTML elements are available as animated primitives.
34

35
```typescript { .api }
36
const animated: {
37
  // Common HTML elements
38
  div: AnimatedComponent<'div'>;
39
  span: AnimatedComponent<'span'>;
40
  p: AnimatedComponent<'p'>;
41
  button: AnimatedComponent<'button'>;
42
  input: AnimatedComponent<'input'>;
43
  img: AnimatedComponent<'img'>;
44
  
45
  // Form elements
46
  form: AnimatedComponent<'form'>;
47
  label: AnimatedComponent<'label'>;
48
  textarea: AnimatedComponent<'textarea'>;
49
  select: AnimatedComponent<'select'>;
50
  option: AnimatedComponent<'option'>;
51
  
52
  // List elements
53
  ul: AnimatedComponent<'ul'>;
54
  ol: AnimatedComponent<'ol'>;
55
  li: AnimatedComponent<'li'>;
56
  
57
  // Table elements
58
  table: AnimatedComponent<'table'>;
59
  thead: AnimatedComponent<'thead'>;
60
  tbody: AnimatedComponent<'tbody'>;
61
  tr: AnimatedComponent<'tr'>;
62
  td: AnimatedComponent<'td'>;
63
  th: AnimatedComponent<'th'>;
64
  
65
  // Semantic elements
66
  header: AnimatedComponent<'header'>;
67
  nav: AnimatedComponent<'nav'>;
68
  main: AnimatedComponent<'main'>;
69
  section: AnimatedComponent<'section'>;
70
  article: AnimatedComponent<'article'>;
71
  aside: AnimatedComponent<'aside'>;
72
  footer: AnimatedComponent<'footer'>;
73
  
74
  // Media elements
75
  video: AnimatedComponent<'video'>;
76
  audio: AnimatedComponent<'audio'>;
77
  canvas: AnimatedComponent<'canvas'>;
78
  
79
  // All other HTML elements...
80
  a: AnimatedComponent<'a'>;
81
  abbr: AnimatedComponent<'abbr'>;
82
  address: AnimatedComponent<'address'>;
83
  area: AnimatedComponent<'area'>;
84
  b: AnimatedComponent<'b'>;
85
  base: AnimatedComponent<'base'>;
86
  bdi: AnimatedComponent<'bdi'>;
87
  bdo: AnimatedComponent<'bdo'>;
88
  big: AnimatedComponent<'big'>;
89
  blockquote: AnimatedComponent<'blockquote'>;
90
  body: AnimatedComponent<'body'>;
91
  br: AnimatedComponent<'br'>;
92
  caption: AnimatedComponent<'caption'>;
93
  cite: AnimatedComponent<'cite'>;
94
  code: AnimatedComponent<'code'>;
95
  col: AnimatedComponent<'col'>;
96
  colgroup: AnimatedComponent<'colgroup'>;
97
  data: AnimatedComponent<'data'>;
98
  datalist: AnimatedComponent<'datalist'>;
99
  dd: AnimatedComponent<'dd'>;
100
  del: AnimatedComponent<'del'>;
101
  details: AnimatedComponent<'details'>;
102
  dfn: AnimatedComponent<'dfn'>;
103
  dialog: AnimatedComponent<'dialog'>;
104
  dl: AnimatedComponent<'dl'>;
105
  dt: AnimatedComponent<'dt'>;
106
  em: AnimatedComponent<'em'>;
107
  embed: AnimatedComponent<'embed'>;
108
  fieldset: AnimatedComponent<'fieldset'>;
109
  figcaption: AnimatedComponent<'figcaption'>;
110
  figure: AnimatedComponent<'figure'>;
111
  h1: AnimatedComponent<'h1'>;
112
  h2: AnimatedComponent<'h2'>;
113
  h3: AnimatedComponent<'h3'>;
114
  h4: AnimatedComponent<'h4'>;
115
  h5: AnimatedComponent<'h5'>;
116
  h6: AnimatedComponent<'h6'>;
117
  head: AnimatedComponent<'head'>;
118
  hgroup: AnimatedComponent<'hgroup'>;
119
  hr: AnimatedComponent<'hr'>;
120
  html: AnimatedComponent<'html'>;
121
  i: AnimatedComponent<'i'>;
122
  iframe: AnimatedComponent<'iframe'>;
123
  ins: AnimatedComponent<'ins'>;
124
  kbd: AnimatedComponent<'kbd'>;
125
  keygen: AnimatedComponent<'keygen'>;
126
  legend: AnimatedComponent<'legend'>;
127
  link: AnimatedComponent<'link'>;
128
  map: AnimatedComponent<'map'>;
129
  mark: AnimatedComponent<'mark'>;
130
  menu: AnimatedComponent<'menu'>;
131
  menuitem: AnimatedComponent<'menuitem'>;
132
  meta: AnimatedComponent<'meta'>;
133
  meter: AnimatedComponent<'meter'>;
134
  noscript: AnimatedComponent<'noscript'>;
135
  object: AnimatedComponent<'object'>;
136
  optgroup: AnimatedComponent<'optgroup'>;
137
  output: AnimatedComponent<'output'>;
138
  param: AnimatedComponent<'param'>;
139
  picture: AnimatedComponent<'picture'>;
140
  pre: AnimatedComponent<'pre'>;
141
  progress: AnimatedComponent<'progress'>;
142
  q: AnimatedComponent<'q'>;
143
  rp: AnimatedComponent<'rp'>;
144
  rt: AnimatedComponent<'rt'>;
145
  ruby: AnimatedComponent<'ruby'>;
146
  s: AnimatedComponent<'s'>;
147
  samp: AnimatedComponent<'samp'>;
148
  script: AnimatedComponent<'script'>;
149
  small: AnimatedComponent<'small'>;
150
  source: AnimatedComponent<'source'>;
151
  strong: AnimatedComponent<'strong'>;
152
  style: AnimatedComponent<'style'>;
153
  sub: AnimatedComponent<'sub'>;
154
  summary: AnimatedComponent<'summary'>;
155
  sup: AnimatedComponent<'sup'>;
156
  tfoot: AnimatedComponent<'tfoot'>;
157
  time: AnimatedComponent<'time'>;
158
  title: AnimatedComponent<'title'>;
159
  track: AnimatedComponent<'track'>;
160
  u: AnimatedComponent<'u'>;
161
  var: AnimatedComponent<'var'>;
162
  wbr: AnimatedComponent<'wbr'>;
163
};
164
```
165

166
### SVG Element Primitives
167

168
All standard SVG elements are available as animated primitives.
169

170
```typescript { .api }
171
const animated: {
172
  // SVG container elements
173
  svg: AnimatedComponent<'svg'>;
174
  g: AnimatedComponent<'g'>;
175
  defs: AnimatedComponent<'defs'>;
176
  
177
  // SVG shapes
178
  circle: AnimatedComponent<'circle'>;
179
  ellipse: AnimatedComponent<'ellipse'>;
180
  rect: AnimatedComponent<'rect'>;
181
  path: AnimatedComponent<'path'>;
182
  polygon: AnimatedComponent<'polygon'>;
183
  polyline: AnimatedComponent<'polyline'>;
184
  line: AnimatedComponent<'line'>;
185
  
186
  // SVG text
187
  text: AnimatedComponent<'text'>;
188
  tspan: AnimatedComponent<'tspan'>;
189
  
190
  // SVG gradients and patterns
191
  linearGradient: AnimatedComponent<'linearGradient'>;
192
  radialGradient: AnimatedComponent<'radialGradient'>;
193
  pattern: AnimatedComponent<'pattern'>;
194
  stop: AnimatedComponent<'stop'>;
195
  
196
  // SVG utility elements
197
  clipPath: AnimatedComponent<'clipPath'>;
198
  mask: AnimatedComponent<'mask'>;
199
  image: AnimatedComponent<'image'>;
200
  foreignObject: AnimatedComponent<'foreignObject'>;
201
};
202
```
203

204
### Animated Component Type
205

206
The type of animated components created by the animated function.
207

208
```typescript { .api }
209
type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<
210
  AnimatedProps<Merge<ComponentPropsWithRef<T>, { style?: StyleProps }>> &
211
  FluidProps<{
212
    scrollTop?: number;
213
    scrollLeft?: number;
214
    viewBox?: string;
215
  }>
216
>;
217

218
type AnimatedProps<Props extends object> = {
219
  [P in keyof Props]: P extends 'ref' | 'key'
220
    ? Props[P]
221
    : AnimatedProp<Props[P]>;
222
};
223
```
224

225
### Animated Alias
226

227
Shorthand alias for the animated namespace.
228

229
```typescript { .api }
230
const a: typeof animated;
231
```
232

233
**Usage Examples:**
234

235
```typescript
236
import { animated, a, useSpring } from "@react-spring/web";
237

238
function AnimatedBox() {
239
  const styles = useSpring({
240
    from: { opacity: 0, transform: 'scale(0.8)' },
241
    to: { opacity: 1, transform: 'scale(1)' },
242
  });
243

244
  return (
245
    <>
246
      {/* Full syntax */}
247
      <animated.div style={styles}>Animated with animated.div</animated.div>
248
      
249
      {/* Shorthand syntax */}
250
      <a.div style={styles}>Animated with a.div</a.div>
251
      
252
      {/* SVG animation */}
253
      <a.svg width="100" height="100">
254
        <a.circle 
255
          cx="50" 
256
          cy="50" 
257
          r={styles.opacity.to(o => o * 40)}
258
          fill="blue"
259
        />
260
      </a.svg>
261
    </>
262
  );
263
}
264
```
265

266
## Special Properties
267

268
Animated components support special properties for DOM interaction:
269

270
### Scroll Properties
271

272
```typescript { .api }
273
interface ScrollProps {
274
  /** Vertical scroll position */
275
  scrollTop?: number;
276
  /** Horizontal scroll position */
277
  scrollLeft?: number;
278
}
279
```
280

281
### SVG Properties
282

283
```typescript { .api }
284
interface SVGProps {
285
  /** SVG viewBox attribute */
286
  viewBox?: string;
287
}
288
```
289

290
**Usage Examples:**
291

292
```typescript
293
// Animated scrolling
294
const scrollStyles = useSpring({
295
  scrollTop: showContent ? 200 : 0,
296
});
297

298
<a.div style={scrollStyles} className="scrollable-container">
299
  Content...
300
</a.div>
301

302
// Animated SVG viewBox
303
const svgStyles = useSpring({
304
  viewBox: isZoomed ? "0 0 100 100" : "0 0 200 200",
305
});
306

307
<a.svg style={svgStyles}>
308
  <a.rect width="50" height="50" />
309
</a.svg>
310
```