Skip to content

Commit b46e497

Browse files
toankhontechtoankhontech
committed
feat: add 25 new animation presets, CLI tool, and example apps
Big update — now shipping all 35 animation presets: Basic (10): slide, fade, slide-fade, scale, scale-fade, vertical, vertical-fade, parallax, overlap, peek Advanced (10): stack, tinder, coverflow, cube, flip, wheel, accordion, zoom, rotate, depth Creative (15): newspaper, origami, carousel-3d, wave, spiral, glitch, morph, shutter, domino, elastic, blur-slide, windmill, film-strip, helix, gravity Also added: - CLI tool (ultra-carousel-cli) with init, add, list commands - Expo example app with preset selector - Bare React Native example app - Tests for advanced and creative presets - Updated README with full preset documentation
1 parent f1bb8f0 commit b46e497

62 files changed

Lines changed: 4077 additions & 30 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CONTRIBUTING.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ examples/
4848

4949
### Creating a New Animation Preset
5050

51-
1. Create a new file in `packages/core/src/animations/{phase}/`
51+
1. Create a new file in `packages/core/src/animations/{category}/` (basic, advanced, or creative)
5252
2. Follow the preset template:
5353

5454
```typescript
@@ -57,7 +57,7 @@ examples/
5757
* @description Description of the effect
5858
* @preset my-preset
5959
* @difficulty Easy|Medium|Hard
60-
* @phase 1|2|3
60+
* @category basic|advanced|creative
6161
*/
6262

6363
import { interpolate, Extrapolation } from 'react-native-reanimated';

‎README.md‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function App() {
7070

7171
## Animation Presets
7272

73-
### Basic (Phase 1)
73+
### Basic
7474

7575
| Preset | Description |
7676
|--------|-------------|
@@ -85,7 +85,7 @@ export default function App() {
8585
| `overlap` | Items overlap with 30% coverage |
8686
| `peek` | Adjacent items peek from sides |
8787

88-
### Advanced (Phase 2) - Coming Soon
88+
### Advanced
8989

9090
| Preset | Description |
9191
|--------|-------------|
@@ -100,9 +100,25 @@ export default function App() {
100100
| `rotate` | Rotation-based transition |
101101
| `depth` | Depth-of-field effect |
102102

103-
### Creative (Phase 3) - Coming Soon
103+
### Creative
104104

105-
newspaper, origami, carousel-3d, wave, spiral, glitch, morph, shutter, domino, elastic, blur-slide, windmill, film-strip, helix, gravity
105+
| Preset | Description |
106+
|--------|-------------|
107+
| `newspaper` | Fly in with spin like headlines |
108+
| `origami` | Paper-fold origami effect |
109+
| `carousel-3d` | True 3D circular carousel |
110+
| `wave` | Sine wave motion |
111+
| `spiral` | Spiral outward with rotation |
112+
| `glitch` | Digital glitch jitter effect |
113+
| `morph` | Shape morphing transition |
114+
| `shutter` | Camera shutter open/close |
115+
| `domino` | Domino falling effect |
116+
| `elastic` | Elastic bounce stretch |
117+
| `blur-slide` | Slide with simulated blur |
118+
| `windmill` | Windmill pivot rotation |
119+
| `film-strip` | Film strip slide with jitter |
120+
| `helix` | DNA helix 3D spiral |
121+
| `gravity` | Gravity drop with bounce |
106122

107123
## API Reference
108124

‎examples/bare-example/App.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/**
2+
* React Native bare workflow example
3+
*/
4+
5+
import React, { useState } from 'react';
6+
import {
7+
View,
8+
Text,
9+
ScrollView,
10+
StyleSheet,
11+
Dimensions,
12+
TouchableOpacity,
13+
SafeAreaView,
14+
} from 'react-native';
15+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
16+
import { Carousel, useCarousel } from 'react-native-ultra-carousel';
17+
import type { PresetName } from 'react-native-ultra-carousel';
18+
19+
const { width: SCREEN_WIDTH } = Dimensions.get('window');
20+
21+
const COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
22+
23+
const DATA = COLORS.map((color, i) => ({
24+
id: String(i + 1),
25+
title: `Card ${i + 1}`,
26+
color,
27+
}));
28+
29+
const PRESETS: PresetName[] = [
30+
'slide', 'fade', 'scale', 'coverflow', 'cube',
31+
'flip', 'stack', 'tinder', 'newspaper', 'wave',
32+
];
33+
34+
export default function App() {
35+
const [preset, setPreset] = useState<PresetName>('slide');
36+
const carousel = useCarousel();
37+
38+
return (
39+
<GestureHandlerRootView style={styles.flex}>
40+
<SafeAreaView style={styles.flex}>
41+
<ScrollView style={styles.container}>
42+
<Text style={styles.title}>Ultra Carousel</Text>
43+
<Text style={styles.subtitle}>Bare Workflow Example</Text>
44+
45+
<View style={styles.carouselWrap}>
46+
<Carousel
47+
ref={carousel.ref}
48+
data={DATA}
49+
renderItem={({ item }) => (
50+
<View style={[styles.card, { backgroundColor: item.color }]}>
51+
<Text style={styles.cardText}>{item.title}</Text>
52+
<Text style={styles.presetText}>{preset}</Text>
53+
</View>
54+
)}
55+
preset={preset}
56+
width={SCREEN_WIDTH - 40}
57+
height={220}
58+
pagination
59+
gap={10}
60+
/>
61+
</View>
62+
63+
<Text style={styles.counter}>
64+
{carousel.activeIndex + 1} / {DATA.length}
65+
</Text>
66+
67+
<View style={styles.chips}>
68+
{PRESETS.map((p) => (
69+
<TouchableOpacity
70+
key={p}
71+
style={[styles.chip, preset === p && styles.chipActive]}
72+
onPress={() => setPreset(p)}
73+
>
74+
<Text style={[styles.chipText, preset === p && styles.chipTextActive]}>
75+
{p}
76+
</Text>
77+
</TouchableOpacity>
78+
))}
79+
</View>
80+
</ScrollView>
81+
</SafeAreaView>
82+
</GestureHandlerRootView>
83+
);
84+
}
85+
86+
const styles = StyleSheet.create({
87+
flex: { flex: 1 },
88+
container: { flex: 1, backgroundColor: '#f5f5f5' },
89+
title: {
90+
fontSize: 26,
91+
fontWeight: '800',
92+
textAlign: 'center',
93+
marginTop: 24,
94+
color: '#1a1a2e',
95+
},
96+
subtitle: {
97+
fontSize: 13,
98+
color: '#999',
99+
textAlign: 'center',
100+
marginBottom: 20,
101+
},
102+
carouselWrap: { alignItems: 'center' },
103+
card: {
104+
flex: 1,
105+
borderRadius: 14,
106+
justifyContent: 'center',
107+
alignItems: 'center',
108+
},
109+
cardText: { fontSize: 22, fontWeight: '700', color: '#fff' },
110+
presetText: { fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 4 },
111+
counter: {
112+
textAlign: 'center',
113+
color: '#999',
114+
fontSize: 12,
115+
marginTop: 8,
116+
marginBottom: 16,
117+
},
118+
chips: {
119+
flexDirection: 'row',
120+
flexWrap: 'wrap',
121+
paddingHorizontal: 20,
122+
gap: 8,
123+
marginBottom: 40,
124+
},
125+
chip: {
126+
paddingHorizontal: 14,
127+
paddingVertical: 7,
128+
borderRadius: 18,
129+
backgroundColor: '#e0e0e0',
130+
},
131+
chipActive: { backgroundColor: '#333' },
132+
chipText: { fontSize: 12, color: '#555', fontWeight: '500' },
133+
chipTextActive: { color: '#fff' },
134+
});

‎examples/bare-example/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "bare-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"android": "react-native run-android",
7+
"ios": "react-native run-ios",
8+
"start": "react-native start"
9+
},
10+
"dependencies": {
11+
"react": "18.2.0",
12+
"react-native": "0.73.6",
13+
"react-native-gesture-handler": "~2.14.0",
14+
"react-native-reanimated": "~3.6.0",
15+
"react-native-ultra-carousel": "*"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.2.0",
19+
"typescript": "^5.3.0"
20+
}
21+
}

‎examples/bare-example/tsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../../tsconfig.base.json",
3+
"compilerOptions": {
4+
"jsx": "react-native",
5+
"noEmit": true
6+
}
7+
}

0 commit comments

Comments
 (0)