react-native-puff-pop 1.0.7 → 1.0.8

package/README.md

@@ -15,11 +15,13 @@ Works with both **React Native CLI** and **Expo** projects - no native dependenc
 
 ## Features
 
-- 🎬 **11 Animation Effects**: scale, rotate, fade, slideUp, slideDown, slideLeft, slideRight, bounce, flip, zoom, rotateScale
+- 🎬 **16 Animation Effects**: scale, rotate, fade, slideUp/Down/Left/Right, bounce, flip, zoom, rotateScale, shake, pulse, swing, wobble, elastic
 - 🎯 **Exit Animations**: Different effects for enter and exit animations
 - 🔄 **Reverse Mode**: Reverse animation direction with a single prop
 - 🎛️ **Custom Initial Values**: Fine-tune starting opacity, scale, rotation, and position
 - 📊 **Animation Intensity**: Control how dramatic your animations are (0-1)
+- 📍 **Anchor Point**: Set transform origin for scale/rotate (top, bottom, corners, etc.)
+- 🧲 **Spring Physics**: Use physics-based spring animations with customizable tension/friction
 - 🦴 **Skeleton Mode**: Reserve space before animation or expand from zero height
 - ⚡ **Native Driver Support**: Smooth 60fps animations
 - 🎯 **Easy to Use**: Just wrap your components with `<PuffPop>`
@@ -240,6 +242,43 @@ With `PuffPopGroup`:
 </PuffPopGroup>
 ```
 
+### Exit Stagger Animation
+
+Stagger the exit animation of group children:
+
+```tsx
+// Children exit one by one in reverse order (last first)
+<PuffPopGroup
+  staggerDelay={50}
+  exitStaggerDelay={50}
+  exitStaggerDirection="reverse"
+  visible={isVisible}
+>
+  <ListItem />
+  <ListItem />
+  <ListItem />
+</PuffPopGroup>
+
+// Children exit from center outward
+<PuffPopGroup
+  exitStaggerDelay={30}
+  exitStaggerDirection="center"
+  visible={isVisible}
+>
+  <MenuItem />
+  <MenuItem />
+  <MenuItem />
+  <MenuItem />
+  <MenuItem />
+</PuffPopGroup>
+```
+
+Exit stagger directions:
+- `forward`: First child exits first
+- `reverse`: Last child exits first (default, LIFO)
+- `center`: Center children exit first
+- `edges`: Edge children exit first
+
 ### Custom Initial Values
 
 Fine-tune the starting values of your animations:
@@ -352,6 +391,91 @@ With `PuffPopGroup`:
 </PuffPopGroup>
 ```
 
+### Anchor Point
+
+Set the transform origin for scale/rotate animations:
+
+```tsx
+// Scale from top (expands downward)
+<PuffPop effect="scale" anchorPoint="top">
+  <DropdownMenu />
+</PuffPop>
+
+// Scale from bottom-left corner
+<PuffPop effect="scale" anchorPoint="bottomLeft">
+  <Tooltip />
+</PuffPop>
+
+// Rotate from top-left (door-opening effect)
+<PuffPop effect="rotate" anchorPoint="topLeft">
+  <Panel />
+</PuffPop>
+
+// Flip from right edge
+<PuffPop effect="flip" anchorPoint="right">
+  <Card />
+</PuffPop>
+```
+
+Available anchor points:
+
+| Value | Description |
+|-------|-------------|
+| `center` | Default center point |
+| `top` | Top center |
+| `bottom` | Bottom center |
+| `left` | Left center |
+| `right` | Right center |
+| `topLeft` | Top-left corner |
+| `topRight` | Top-right corner |
+| `bottomLeft` | Bottom-left corner |
+| `bottomRight` | Bottom-right corner |
+
+### Spring Animation
+
+Use physics-based spring animations for more natural, bouncy effects:
+
+```tsx
+// Enable spring animation
+<PuffPop effect="scale" useSpring>
+  <Card />
+</PuffPop>
+
+// Customize spring physics
+<PuffPop
+  effect="slideUp"
+  useSpring
+  springConfig={{
+    tension: 150,    // Higher = faster, snappier
+    friction: 8,     // Higher = less bouncy
+  }}
+>
+  <Modal />
+</PuffPop>
+
+// Very bouncy spring
+<PuffPop
+  effect="scale"
+  useSpring
+  springConfig={{
+    tension: 200,
+    friction: 5,
+    bounciness: 12,
+  }}
+>
+  <Button />
+</PuffPop>
+```
+
+Spring config options:
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `tension` | `100` | Spring stiffness (higher = faster) |
+| `friction` | `10` | Damping (higher = less oscillation) |
+| `speed` | `12` | Animation speed multiplier |
+| `bounciness` | `8` | Bounce amount (higher = more bouncy) |
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -382,6 +506,9 @@ With `PuffPopGroup`:
 | `initialTranslateY` | `number` | - | Custom initial Y translation in pixels |
 | `reverse` | `boolean` | `false` | Reverse animation direction |
 | `intensity` | `number` | `1` | Animation intensity multiplier (0-1) |
+| `anchorPoint` | `PuffPopAnchorPoint` | `'center'` | Transform origin for scale/rotate |
+| `useSpring` | `boolean` | `false` | Use physics-based spring animation |
+| `springConfig` | `PuffPopSpringConfig` | - | Spring animation settings (tension, friction, etc.) |
 
 ### PuffPopGroup Props
 
@@ -415,6 +542,11 @@ With `PuffPopGroup`:
 | `initialTranslateY` | `number` | - | Custom initial Y translation for all children |
 | `reverse` | `boolean` | `false` | Reverse animation direction for all children |
 | `intensity` | `number` | `1` | Animation intensity multiplier for all children |
+| `anchorPoint` | `PuffPopAnchorPoint` | `'center'` | Transform origin for all children |
+| `useSpring` | `boolean` | `false` | Use spring animation for all children |
+| `springConfig` | `PuffPopSpringConfig` | - | Spring settings for all children |
+| `exitStaggerDelay` | `number` | `0` | Delay between each child's exit animation |
+| `exitStaggerDirection` | `'forward' \| 'reverse' \| 'center' \| 'edges'` | `'reverse'` | Direction of exit stagger |
 
 ### Animation Effects (`PuffPopEffect`)
 
@@ -431,6 +563,11 @@ With `PuffPopGroup`:
 | `flip` | 3D flip effect |
 | `zoom` | Zoom with slight overshoot |
 | `rotateScale` | Rotate + Scale combined |
+| `shake` | Shake left-right (for alerts, errors) |
+| `pulse` | Pulse heartbeat effect (for emphasis) |
+| `swing` | Swing like pendulum (for menus) |
+| `wobble` | Wobble with tilt (playful entrance) |
+| `elastic` | Elastic stretch effect (springy feel) |
 
 ### Easing Types (`PuffPopEasing`)