0
# Animation & Transitions
1

2
Animation components and transition effects for enhancing user interface interactions and providing smooth visual feedback.
3

4
## Capabilities
5

6
### Fade Transition
7

8
Fade in/out animation component for smooth opacity transitions.
9

10
```typescript { .api }
11
/**
12
 * Fade transition component for opacity animations
13
 * @param props - Fade component props
14
 * @returns JSX element with fade animation capabilities
15
 */
16
function Fade(props: IFadeProps): JSX.Element;
17

18
interface IFadeProps extends StyledProps {
19
  in?: boolean;
20
  children?: React.ReactNode;
21
  duration?: number;
22
  delay?: number;
23
  style?: any;
24
  entryDuration?: number;
25
  exitDuration?: number;
26
  initialScale?: number;
27
  animate?: {
28
    initial?: any;
29
    animate?: any;
30
    exit?: any;
31
    transition?: any;
32
  };
33
}
34
```
35

36
**Usage Example:**
37

38
```typescript
39
import { Fade, Button, Box, Text, VStack } from "native-base";
40

41
function FadeExample() {
42
  const [show, setShow] = React.useState(false);
43
  
44
  return (
45
    <VStack space={4}>
46
      <Button onPress={() => setShow(!show)}>
47
        Toggle Fade
48
      </Button>
49
      
50
      <Fade in={show}>
51
        <Box bg="teal.500" p={4} rounded="md">
52
          <Text color="white">Fade content</Text>
53
        </Box>
54
      </Fade>
55
      
56
      {/* Custom duration */}
57
      <Fade in={show} duration={1000}>
58
        <Box bg="blue.500" p={4} rounded="md">
59
          <Text color="white">Slow fade (1000ms)</Text>
60
        </Box>
61
      </Fade>
62
    </VStack>
63
  );
64
}
65
```
66

67
### ScaleFade Transition
68

69
Combined scale and fade animation for more dynamic transitions.
70

71
```typescript { .api }
72
/**
73
 * Scale and fade transition component
74
 * @param props - ScaleFade component props
75
 * @returns JSX element with scale and fade animation
76
 */
77
function ScaleFade(props: IScaleFadeProps): JSX.Element;
78

79
interface IScaleFadeProps extends IFadeProps {
80
  initialScale?: number;
81
  in?: boolean;
82
}
83
```
84

85
**Usage Example:**
86

87
```typescript
88
import { ScaleFade, Button, Box, Text, VStack } from "native-base";
89

90
function ScaleFadeExample() {
91
  const [show, setShow] = React.useState(false);
92
  
93
  return (
94
    <VStack space={4}>
95
      <Button onPress={() => setShow(!show)}>
96
        Toggle ScaleFade
97
      </Button>
98
      
99
      <ScaleFade in={show} initialScale={0.9}>
100
        <Box bg="purple.500" p={4} rounded="md">
101
          <Text color="white">ScaleFade content</Text>
102
        </Box>
103
      </ScaleFade>
104
      
105
      {/* Custom initial scale */}
106
      <ScaleFade in={show} initialScale={0.5}>
107
        <Box bg="pink.500" p={4} rounded="md">
108
          <Text color="white">Dramatic scale effect</Text>
109
        </Box>
110
      </ScaleFade>
111
    </VStack>
112
  );
113
}
114
```
115

116
### Slide Transition
117

118
Slide animation component for directional entrance/exit effects.
119

120
```typescript { .api }
121
/**
122
 * Slide transition component for directional animations
123
 * @param props - Slide component props
124
 * @returns JSX element with slide animation
125
 */
126
function Slide(props: ISlideProps): JSX.Element;
127

128
interface ISlideProps extends StyledProps {
129
  in?: boolean;
130
  children?: React.ReactNode;
131
  direction?: "top" | "right" | "bottom" | "left";
132
  duration?: number;
133
  delay?: number;
134
  style?: any;
135
  placement?: "top" | "right" | "bottom" | "left";
136
}
137
```
138

139
**Usage Example:**
140

141
```typescript
142
import { Slide, Button, Box, Text, VStack, HStack } from "native-base";
143

144
function SlideExample() {
145
  const [show, setShow] = React.useState(false);
146
  
147
  return (
148
    <VStack space={4}>
149
      <Button onPress={() => setShow(!show)}>
150
        Toggle Slide
151
      </Button>
152
      
153
      {/* Slide from different directions */}
154
      <VStack space={2}>
155
        <Slide in={show} direction="top">
156
          <Box bg="red.500" p={2} rounded="md">
157
            <Text color="white" textAlign="center">From Top</Text>
158
          </Box>
159
        </Slide>
160
        
161
        <HStack space={2}>
162
          <Slide in={show} direction="left">
163
            <Box bg="green.500" p={2} rounded="md" flex={1}>
164
              <Text color="white" textAlign="center">From Left</Text>
165
            </Box>
166
          </Slide>
167
          
168
          <Slide in={show} direction="right">
169
            <Box bg="blue.500" p={2} rounded="md" flex={1}>
170
              <Text color="white" textAlign="center">From Right</Text>
171
            </Box>
172
          </Slide>
173
        </HStack>
174
        
175
        <Slide in={show} direction="bottom">
176
          <Box bg="orange.500" p={2} rounded="md">
177
            <Text color="white" textAlign="center">From Bottom</Text>
178
          </Box>
179
        </Slide>
180
      </VStack>
181
    </VStack>
182
  );
183
}
184
```
185

186
### SlideFade Transition
187

188
Combined slide and fade animation for smooth directional transitions.
189

190
```typescript { .api }
191
/**
192
 * Slide and fade transition component
193
 * @param props - SlideFade component props
194
 * @returns JSX element with slide and fade animation
195
 */
196
function SlideFade(props: ISlideFadeProps): JSX.Element;
197

198
interface ISlideFadeProps extends ISlideProps {
199
  offsetX?: number;
200
  offsetY?: number;
201
}
202
```
203

204
**Usage Example:**
205

206
```typescript
207
import { SlideFade, Button, Box, Text, VStack } from "native-base";
208

209
function SlideFadeExample() {
210
  const [show, setShow] = React.useState(false);
211
  
212
  return (
213
    <VStack space={4}>
214
      <Button onPress={() => setShow(!show)}>
215
        Toggle SlideFade
216
      </Button>
217
      
218
      <SlideFade in={show} offsetX={20}>
219
        <Box bg="cyan.500" p={4} rounded="md">
220
          <Text color="white">SlideFade with X offset</Text>
221
        </Box>
222
      </SlideFade>
223
      
224
      <SlideFade in={show} offsetY={-20}>
225
        <Box bg="indigo.500" p={4} rounded="md">
226
          <Text color="white">SlideFade with Y offset</Text>
227
        </Box>
228
      </SlideFade>
229
    </VStack>
230
  );
231
}
232
```
233

234
### PresenceTransition
235

236
Advanced transition component with customizable animation presets.
237

238
```typescript { .api }
239
/**
240
 * Advanced presence transition component with custom animations
241
 * @returns JSX element with advanced transition capabilities
242
 */
243
function PresenceTransition(): JSX.Element;
244
```
245

246
**Usage Example:**
247

248
```typescript
249
import { PresenceTransition, Button, Box, Text, VStack } from "native-base";
250

251
function PresenceTransitionExample() {
252
  const [isOpen, setIsOpen] = React.useState(false);
253
  
254
  return (
255
    <VStack space={4}>
256
      <Button onPress={() => setIsOpen(!isOpen)}>
257
        Toggle PresenceTransition
258
      </Button>
259
      
260
      <PresenceTransition
261
        visible={isOpen}
262
        initial={{
263
          opacity: 0,
264
          scale: 0
265
        }}
266
        animate={{
267
          opacity: 1,
268
          scale: 1,
269
          transition: {
270
            duration: 250
271
          }
272
        }}
273
      >
274
        <Box bg="emerald.500" p={4} rounded="md">
275
          <Text color="white">Custom animated content</Text>
276
        </Box>
277
      </PresenceTransition>
278
    </VStack>
279
  );
280
}
281
```
282

283
### Stagger Animation
284

285
Staggered animation component for animating multiple elements with delays.
286

287
```typescript { .api }
288
/**
289
 * Stagger animation component for sequential animations
290
 * @returns JSX element with staggered animation capabilities
291
 */
292
function Stagger(): JSX.Element;
293
```
294

295
**Usage Example:**
296

297
```typescript
298
import { Stagger, PresenceTransition, Button, Box, Text, VStack } from "native-base";
299

300
function StaggerExample() {
301
  const [isOpen, setIsOpen] = React.useState(false);
302
  
303
  const items = ['First', 'Second', 'Third', 'Fourth'];
304
  
305
  return (
306
    <VStack space={4}>
307
      <Button onPress={() => setIsOpen(!isOpen)}>
308
        Toggle Stagger
309
      </Button>
310
      
311
      <Stagger
312
        visible={isOpen}
313
        initial={{
314
          opacity: 0,
315
          scale: 0,
316
          translateY: 34
317
        }}
318
        animate={{
319
          translateY: 0,
320
          scale: 1,
321
          opacity: 1,
322
          transition: {
323
            type: "spring",
324
            mass: 0.8,
325
            stagger: {
326
              offset: 30,
327
              reverse: true
328
            }
329
          }
330
        }}
331
        exit={{
332
          translateY: 34,
333
          scale: 0.5,
334
          opacity: 0,
335
          transition: {
336
            duration: 100,
337
            stagger: {
338
              offset: 30,
339
              reverse: true
340
            }
341
          }
342
        }}
343
      >
344
        {items.map((item, index) => (
345
          <PresenceTransition key={index}>
346
            <Box bg="amber.500" p={3} rounded="md" mb={2}>
347
              <Text color="white">{item} Item</Text>
348
            </Box>
349
          </PresenceTransition>
350
        ))}
351
      </Stagger>
352
    </VStack>
353
  );
354
}
355
```
356

357
### Collapse Animation
358

359
Collapse animation component for expanding and collapsing content.
360

361
```typescript { .api }
362
/**
363
 * Collapse animation component for expandable content
364
 * @returns JSX element with collapse animation
365
 */
366
function Collapse(): JSX.Element;
367
```
368

369
**Usage Example:**
370

371
```typescript
372
import { Collapse, Button, Box, Text, VStack } from "native-base";
373

374
function CollapseExample() {
375
  const [show, setShow] = React.useState(false);
376
  
377
  return (
378
    <VStack space={4}>
379
      <Button onPress={() => setShow(!show)}>
380
        {show ? 'Hide' : 'Show'} Content
381
      </Button>
382
      
383
      <Collapse isOpen={show}>
384
        <Box bg="gray.100" p={4} rounded="md">
385
          <Text>
386
            This content can be collapsed and expanded smoothly. 
387
            The height animates automatically based on the content size.
388
          </Text>
389
          <Text mt={2}>
390
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
391
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
392
          </Text>
393
        </Box>
394
      </Collapse>
395
    </VStack>
396
  );
397
}
398
```
399

400
## Animation Patterns
401

402
### Sequential Animations
403

404
Creating sequences of animations for complex interactions:
405

406
```typescript
407
import { 
408
  PresenceTransition, 
409
  Button, 
410
  VStack, 
411
  HStack, 
412
  Box, 
413
  Text 
414
} from "native-base";
415

416
function SequentialAnimations() {
417
  const [step, setStep] = React.useState(0);
418
  
419
  const nextStep = () => {
420
    setStep(current => (current + 1) % 4);
421
  };
422
  
423
  return (
424
    <VStack space={4}>
425
      <Button onPress={nextStep}>Next Step</Button>
426
      
427
      <HStack space={2} h="100">
428
        {[0, 1, 2, 3].map((index) => (
429
          <PresenceTransition
430
            key={index}
431
            visible={step >= index}
432
            initial={{ opacity: 0, translateX: -50 }}
433
            animate={{
434
              opacity: 1,
435
              translateX: 0,
436
              transition: { delay: index * 200 }
437
            }}
438
          >
439
            <Box bg="blue.500" p={4} rounded="md">
440
              <Text color="white">Step {index + 1}</Text>
441
            </Box>
442
          </PresenceTransition>
443
        ))}
444
      </HStack>
445
    </VStack>
446
  );
447
}
448
```
449

450
### Interactive Animations
451

452
Animations triggered by user interactions:
453

454
```typescript
455
import { 
456
  ScaleFade, 
457
  Pressable, 
458
  Box, 
459
  Text, 
460
  SimpleGrid 
461
} from "native-base";
462

463
function InteractiveAnimations() {
464
  const [activeCard, setActiveCard] = React.useState<number | null>(null);
465
  
466
  return (
467
    <SimpleGrid columns={2} spacing={4}>
468
      {[1, 2, 3, 4].map((item) => (
469
        <Pressable
470
          key={item}
471
          onPressIn={() => setActiveCard(item)}
472
          onPressOut={() => setActiveCard(null)}
473
        >
474
          <ScaleFade 
475
            in={activeCard !== item} 
476
            initialScale={0.95}
477
          >
478
            <Box 
479
              bg="purple.500" 
480
              p={6} 
481
              rounded="lg"
482
              shadow={activeCard === item ? "lg" : "sm"}
483
            >
484
              <Text color="white" textAlign="center">
485
                Card {item}
486
              </Text>
487
            </Box>
488
          </ScaleFade>
489
        </Pressable>
490
      ))}
491
    </SimpleGrid>
492
  );
493
}
494
```
495

496
### Loading Animations
497

498
Animation patterns for loading states:
499

500
```typescript
501
import { 
502
  Fade, 
503
  Skeleton, 
504
  VStack, 
505
  HStack, 
506
  Button, 
507
  Text, 
508
  Box 
509
} from "native-base";
510

511
function LoadingAnimations() {
512
  const [isLoading, setIsLoading] = React.useState(false);
513
  const [data, setData] = React.useState<any[]>([]);
514
  
515
  const loadData = async () => {
516
    setIsLoading(true);
517
    setData([]);
518
    
519
    // Simulate API call
520
    setTimeout(() => {
521
      setData([
522
        { id: 1, title: "First Item", description: "Description 1" },
523
        { id: 2, title: "Second Item", description: "Description 2" },
524
        { id: 3, title: "Third Item", description: "Description 3" },
525
      ]);
526
      setIsLoading(false);
527
    }, 2000);
528
  };
529
  
530
  return (
531
    <VStack space={4}>
532
      <Button onPress={loadData} isLoading={isLoading}>
533
        Load Data
534
      </Button>
535
      
536
      {isLoading ? (
537
        <VStack space={3}>
538
          {[1, 2, 3].map((item) => (
539
            <HStack key={item} space={3}>
540
              <Skeleton size="12" rounded="md" />
541
              <VStack space={2} flex={1}>
542
                <Skeleton h="4" />
543
                <Skeleton h="3" w="70%" />
544
              </VStack>
545
            </HStack>
546
          ))}
547
        </VStack>
548
      ) : (
549
        <VStack space={3}>
550
          {data.map((item, index) => (
551
            <Fade key={item.id} in={true}>
552
              <Box 
553
                bg="gray.100" 
554
                p={4} 
555
                rounded="md"
556
                style={{
557
                  animationDelay: `${index * 100}ms`
558
                }}
559
              >
560
                <Text fontWeight="bold">{item.title}</Text>
561
                <Text>{item.description}</Text>
562
              </Box>
563
            </Fade>
564
          ))}
565
        </VStack>
566
      )}
567
    </VStack>
568
  );
569
}
570
```
571

572
### Page Transitions
573

574
Animation patterns for page and screen transitions:
575

576
```typescript
577
import { 
578
  SlideFade, 
579
  Button, 
580
  VStack, 
581
  HStack, 
582
  Text, 
583
  Box 
584
} from "native-base";
585

586
function PageTransitions() {
587
  const [currentPage, setCurrentPage] = React.useState(0);
588
  
589
  const pages = [
590
    { title: "Welcome", content: "Welcome to our app!" },
591
    { title: "Features", content: "Discover amazing features" },
592
    { title: "Get Started", content: "Ready to begin?" }
593
  ];
594
  
595
  const nextPage = () => {
596
    setCurrentPage(current => (current + 1) % pages.length);
597
  };
598
  
599
  const prevPage = () => {
600
    setCurrentPage(current => current === 0 ? pages.length - 1 : current - 1);
601
  };
602
  
603
  return (
604
    <VStack space={4}>
605
      <HStack space={2} justifyContent="center">
606
        <Button size="sm" onPress={prevPage}>Previous</Button>
607
        <Button size="sm" onPress={nextPage}>Next</Button>
608
      </HStack>
609
      
610
      <Box minH="200" position="relative">
611
        {pages.map((page, index) => (
612
          <SlideFade
613
            key={index}
614
            in={currentPage === index}
615
            offsetX={currentPage === index ? 0 : 100}
616
            style={{
617
              position: currentPage === index ? 'relative' : 'absolute',
618
              width: '100%'
619
            }}
620
          >
621
            <Box bg="blue.50" p={6} rounded="lg" textAlign="center">
622
              <Text fontSize="xl" fontWeight="bold" mb={2}>
623
                {page.title}
624
              </Text>
625
              <Text>{page.content}</Text>
626
            </Box>
627
          </SlideFade>
628
        ))}
629
      </Box>
630
    </VStack>
631
  );
632
}
633
```