react-native-puff-pop 1.0.6 → 1.0.7

package/README.md

@@ -16,6 +16,10 @@ 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
+- 🎯 **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)
 - 🦴 **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>`
@@ -181,6 +185,173 @@ function App() {
 </PuffPop>
 ```
 
+### Exit Animation
+
+Use different effects for enter and exit animations:
+
+```tsx
+// Scale in, fade out
+<PuffPop 
+  effect="scale" 
+  exitEffect="fade"
+  visible={isVisible}
+>
+  <Modal />
+</PuffPop>
+
+// Slide up to enter, slide down to exit
+<PuffPop 
+  effect="slideUp" 
+  exitEffect="slideDown"
+  exitDuration={200}
+  visible={isVisible}
+>
+  <Toast />
+</PuffPop>
+
+// Different timing for enter and exit
+<PuffPop 
+  effect="zoom"
+  duration={400}
+  easing="spring"
+  exitEffect="fade"
+  exitDuration={150}
+  exitEasing="easeIn"
+  exitDelay={50}
+  visible={isVisible}
+>
+  <Notification />
+</PuffPop>
+```
+
+With `PuffPopGroup`:
+
+```tsx
+<PuffPopGroup
+  effect="slideUp"
+  exitEffect="fade"
+  exitDuration={150}
+  staggerDelay={50}
+  visible={isVisible}
+>
+  <ListItem />
+  <ListItem />
+  <ListItem />
+</PuffPopGroup>
+```
+
+### Custom Initial Values
+
+Fine-tune the starting values of your animations:
+
+```tsx
+// Start from 50% opacity instead of 0
+<PuffPop initialOpacity={0.5}>
+  <Card />
+</PuffPop>
+
+// Start from a larger scale
+<PuffPop effect="scale" initialScale={0.5}>
+  <Avatar />
+</PuffPop>
+
+// Custom slide distance
+<PuffPop effect="slideUp" initialTranslateY={200}>
+  <Modal />
+</PuffPop>
+
+// Combine multiple custom values
+<PuffPop
+  effect="rotateScale"
+  initialOpacity={0.3}
+  initialScale={0.2}
+  initialRotate={-90}
+>
+  <Icon />
+</PuffPop>
+```
+
+### Reverse Mode
+
+Reverse the animation direction:
+
+```tsx
+// slideUp now slides from top instead of bottom
+<PuffPop effect="slideUp" reverse>
+  <Toast />
+</PuffPop>
+
+// slideLeft now slides from left instead of right
+<PuffPop effect="slideLeft" reverse>
+  <Drawer />
+</PuffPop>
+
+// rotate spins clockwise instead of counter-clockwise
+<PuffPop effect="rotate" reverse>
+  <Spinner />
+</PuffPop>
+```
+
+With `PuffPopGroup`:
+
+```tsx
+<PuffPopGroup effect="slideRight" reverse staggerDelay={50}>
+  <MenuItem />
+  <MenuItem />
+  <MenuItem />
+</PuffPopGroup>
+```
+
+### Animation Intensity
+
+Control how dramatic your animations are with the `intensity` prop (0-1):
+
+```tsx
+// Full animation (default)
+<PuffPop effect="slideUp" intensity={1}>
+  <Card />
+</PuffPop>
+
+// Half the movement distance (25px instead of 50px)
+<PuffPop effect="slideUp" intensity={0.5}>
+  <Card />
+</PuffPop>
+
+// Subtle animation (10px slide)
+<PuffPop effect="slideUp" intensity={0.2}>
+  <Tooltip />
+</PuffPop>
+
+// No movement, just fade (intensity 0)
+<PuffPop effect="slideUp" intensity={0}>
+  <Content />
+</PuffPop>
+```
+
+Works with all effects:
+
+```tsx
+// Smaller scale range (starts at 0.5 instead of 0)
+<PuffPop effect="scale" intensity={0.5}>
+  <Avatar />
+</PuffPop>
+
+// Less rotation (180deg instead of 360deg)
+<PuffPop effect="rotate" intensity={0.5}>
+  <Icon />
+</PuffPop>
+```
+
+With `PuffPopGroup`:
+
+```tsx
+<PuffPopGroup effect="slideLeft" intensity={0.3} staggerDelay={50}>
+  <ListItem />
+  <ListItem />
+  <ListItem />
+</PuffPopGroup>
+```
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -200,6 +371,17 @@ function App() {
 | `loopDelay` | `number` | `0` | Delay between loop iterations in ms |
 | `respectReduceMotion` | `boolean` | `true` | Respect system reduce motion setting |
 | `testID` | `string` | - | Test ID for testing purposes |
+| `exitEffect` | `PuffPopEffect` | - | Animation effect for exit (defaults to enter effect) |
+| `exitDuration` | `number` | - | Duration for exit animation (defaults to duration) |
+| `exitEasing` | `PuffPopEasing` | - | Easing for exit animation (defaults to easing) |
+| `exitDelay` | `number` | `0` | Delay before exit animation starts in ms |
+| `initialOpacity` | `number` | - | Custom initial opacity (0-1) |
+| `initialScale` | `number` | - | Custom initial scale value |
+| `initialRotate` | `number` | - | Custom initial rotation in degrees |
+| `initialTranslateX` | `number` | - | Custom initial X translation in pixels |
+| `initialTranslateY` | `number` | - | Custom initial Y translation in pixels |
+| `reverse` | `boolean` | `false` | Reverse animation direction |
+| `intensity` | `number` | `1` | Animation intensity multiplier (0-1) |
 
 ### PuffPopGroup Props
 
@@ -222,6 +404,17 @@ function App() {
 | `gap` | `number` | - | Gap between children |
 | `respectReduceMotion` | `boolean` | `true` | Respect system reduce motion setting |
 | `testID` | `string` | - | Test ID for testing purposes |
+| `exitEffect` | `PuffPopEffect` | - | Exit animation effect for all children |
+| `exitDuration` | `number` | - | Exit duration for all children |
+| `exitEasing` | `PuffPopEasing` | - | Exit easing for all children |
+| `exitDelay` | `number` | `0` | Exit delay for all children |
+| `initialOpacity` | `number` | - | Custom initial opacity for all children |
+| `initialScale` | `number` | - | Custom initial scale for all children |
+| `initialRotate` | `number` | - | Custom initial rotation for all children |
+| `initialTranslateX` | `number` | - | Custom initial X translation for all children |
+| `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 |
 
 ### Animation Effects (`PuffPopEffect`)
 

package/lib/module/index.js

@@ -25,13 +25,47 @@ function getEasing(type) {
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, onAnimationStart, style, animateOnMount = true, loop = false, loopDelay = 0, respectReduceMotion = true, testID, }) {
+export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, onAnimationStart, style, animateOnMount = true, loop = false, loopDelay = 0, respectReduceMotion = true, testID, 
+// Exit animation settings
+exitEffect, exitDuration, exitEasing, exitDelay = 0, 
+// Custom initial values
+initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, 
+// Reverse mode
+reverse = false, 
+// Animation intensity
+intensity = 1, }) {
+    // Clamp intensity between 0 and 1
+    const clampedIntensity = Math.max(0, Math.min(1, intensity));
+    // Helper to get initial value with custom override, reverse, and intensity support
+    const getInitialOpacityValue = () => initialOpacity ?? 0;
+    const getInitialScaleValue = (eff) => {
+        if (initialScale !== undefined)
+            return initialScale;
+        const baseScale = getInitialScale(eff, reverse);
+        // Scale goes from baseScale to 1, so we interpolate: 1 - (1 - baseScale) * intensity
+        return 1 - (1 - baseScale) * clampedIntensity;
+    };
+    const getInitialRotateValue = (eff) => {
+        if (initialRotate !== undefined)
+            return initialRotate;
+        return getInitialRotate(eff, reverse) * clampedIntensity;
+    };
+    const getInitialTranslateXValue = (eff) => {
+        if (initialTranslateX !== undefined)
+            return initialTranslateX;
+        return getInitialTranslateX(eff, reverse) * clampedIntensity;
+    };
+    const getInitialTranslateYValue = (eff) => {
+        if (initialTranslateY !== undefined)
+            return initialTranslateY;
+        return getInitialTranslateY(eff, reverse) * clampedIntensity;
+    };
     // Animation values
-    const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
-    const scale = useRef(new Animated.Value(animateOnMount ? getInitialScale(effect) : 1)).current;
-    const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotate(effect) : 0)).current;
-    const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateX(effect) : 0)).current;
-    const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateY(effect) : 0)).current;
+    const opacity = useRef(new Animated.Value(animateOnMount ? getInitialOpacityValue() : 1)).current;
+    const scale = useRef(new Animated.Value(animateOnMount ? getInitialScaleValue(effect) : 1)).current;
+    const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotateValue(effect) : 0)).current;
+    const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateXValue(effect) : 0)).current;
+    const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateYValue(effect) : 0)).current;
     // For non-skeleton mode
     const [measuredHeight, setMeasuredHeight] = useState(null);
     const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -55,15 +89,20 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }, [respectReduceMotion]);
     // Effective duration (0 if reduce motion is enabled)
     const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : duration;
+    const effectiveExitDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : (exitDuration ?? duration);
+    // Helper to get effect flags for any effect type
+    const getEffectFlags = useCallback((eff) => ({
+        hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(eff),
+        hasRotate: ['rotate', 'rotateScale'].includes(eff),
+        hasFlip: eff === 'flip',
+        hasTranslateX: ['slideLeft', 'slideRight'].includes(eff),
+        hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(eff),
+        hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(eff),
+    }), []);
     // Memoize effect type checks to avoid repeated includes() calls
-    const effectFlags = useMemo(() => ({
-        hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect),
-        hasRotate: ['rotate', 'rotateScale'].includes(effect),
-        hasFlip: effect === 'flip',
-        hasTranslateX: ['slideLeft', 'slideRight'].includes(effect),
-        hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(effect),
-        hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(effect),
-    }), [effect]);
+    const effectFlags = useMemo(() => getEffectFlags(effect), [effect, getEffectFlags]);
+    // Exit effect flags (use exitEffect if specified, otherwise same as enter effect)
+    const exitEffectFlags = useMemo(() => exitEffect ? getEffectFlags(exitEffect) : effectFlags, [exitEffect, getEffectFlags, effectFlags]);
     // Memoize interpolations to avoid recreating on every render
     const rotateInterpolation = useMemo(() => rotate.interpolate({
         inputRange: [-360, 0, 360],
@@ -86,12 +125,18 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         if (toVisible && onAnimationStart) {
             onAnimationStart();
         }
-        const easingFn = getEasing(easing);
+        // Determine which effect settings to use based on direction
+        const currentEffect = toVisible ? effect : (exitEffect ?? effect);
+        const currentDuration = toVisible ? effectiveDuration : effectiveExitDuration;
+        const currentEasing = toVisible ? easing : (exitEasing ?? easing);
+        const currentDelay = toVisible ? delay : exitDelay;
+        const currentFlags = toVisible ? effectFlags : exitEffectFlags;
+        const easingFn = getEasing(currentEasing);
         // When skeleton is false, we animate height which doesn't support native driver
         // So we must use JS driver for all animations in that case
         const useNative = skeleton;
         const config = {
-            duration: effectiveDuration,
+            duration: currentDuration,
             easing: easingFn,
             useNativeDriver: useNative,
         };
@@ -102,33 +147,33 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             ...config,
         }));
         // Scale animation
-        if (effectFlags.hasScale) {
-            const targetScale = toVisible ? 1 : getInitialScale(effect);
+        if (currentFlags.hasScale) {
+            const targetScale = toVisible ? 1 : getInitialScaleValue(currentEffect);
             animations.push(Animated.timing(scale, {
                 toValue: targetScale,
                 ...config,
-                easing: effect === 'bounce' ? Easing.bounce : easingFn,
+                easing: currentEffect === 'bounce' ? Easing.bounce : easingFn,
             }));
         }
         // Rotate animation
-        if (effectFlags.hasRotate || effectFlags.hasFlip) {
-            const targetRotate = toVisible ? 0 : getInitialRotate(effect);
+        if (currentFlags.hasRotate || currentFlags.hasFlip) {
+            const targetRotate = toVisible ? 0 : getInitialRotateValue(currentEffect);
             animations.push(Animated.timing(rotate, {
                 toValue: targetRotate,
                 ...config,
             }));
         }
         // TranslateX animation
-        if (effectFlags.hasTranslateX) {
-            const targetX = toVisible ? 0 : getInitialTranslateX(effect);
+        if (currentFlags.hasTranslateX) {
+            const targetX = toVisible ? 0 : getInitialTranslateXValue(currentEffect);
             animations.push(Animated.timing(translateX, {
                 toValue: targetX,
                 ...config,
             }));
         }
         // TranslateY animation
-        if (effectFlags.hasTranslateY) {
-            const targetY = toVisible ? 0 : getInitialTranslateY(effect);
+        if (currentFlags.hasTranslateY) {
+            const targetY = toVisible ? 0 : getInitialTranslateYValue(currentEffect);
             animations.push(Animated.timing(translateY, {
                 toValue: targetY,
                 ...config,
@@ -139,7 +184,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             const targetHeight = toVisible ? measuredHeight : 0;
             animations.push(Animated.timing(animatedHeight, {
                 toValue: targetHeight,
-                duration: effectiveDuration,
+                duration: currentDuration,
                 easing: easingFn,
                 useNativeDriver: false,
             }));
@@ -148,20 +193,20 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         const parallelAnimation = Animated.parallel(animations);
         // Reset values function for looping
         const resetValues = () => {
-            opacity.setValue(0);
-            scale.setValue(getInitialScale(effect));
-            rotate.setValue(getInitialRotate(effect));
-            translateX.setValue(getInitialTranslateX(effect));
-            translateY.setValue(getInitialTranslateY(effect));
+            opacity.setValue(getInitialOpacityValue());
+            scale.setValue(getInitialScaleValue(effect));
+            rotate.setValue(getInitialRotateValue(effect));
+            translateX.setValue(getInitialTranslateXValue(effect));
+            translateY.setValue(getInitialTranslateYValue(effect));
             if (!skeleton && measuredHeight !== null) {
                 animatedHeight.setValue(0);
             }
         };
         // Build the animation sequence
         let animation;
-        if (delay > 0) {
+        if (currentDelay > 0) {
             animation = Animated.sequence([
-                Animated.delay(delay),
+                Animated.delay(currentDelay),
                 parallelAnimation,
             ]);
         }
@@ -230,9 +275,14 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }, [
         delay,
         effectiveDuration,
+        effectiveExitDuration,
         easing,
         effect,
         effectFlags,
+        exitEffect,
+        exitEffectFlags,
+        exitEasing,
+        exitDelay,
         measuredHeight,
         onAnimationComplete,
         onAnimationStart,
@@ -316,7 +366,8 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
 /**
  * Get initial scale value based on effect
  */
-function getInitialScale(effect) {
+function getInitialScale(effect, _reverse = false) {
+    // Scale doesn't change with reverse (parameter kept for consistent API)
     switch (effect) {
         case 'scale':
         case 'rotateScale':
@@ -334,14 +385,15 @@ function getInitialScale(effect) {
 /**
  * Get initial rotate value based on effect
  */
-function getInitialRotate(effect) {
+function getInitialRotate(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'rotate':
-            return -360;
+            return -360 * multiplier;
         case 'rotateScale':
-            return -180;
+            return -180 * multiplier;
         case 'flip':
-            return -180;
+            return -180 * multiplier;
         default:
             return 0;
     }
@@ -349,12 +401,13 @@ function getInitialRotate(effect) {
 /**
  * Get initial translateX value based on effect
  */
-function getInitialTranslateX(effect) {
+function getInitialTranslateX(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'slideLeft':
-            return 100;
+            return 100 * multiplier;
         case 'slideRight':
-            return -100;
+            return -100 * multiplier;
         default:
             return 0;
     }
@@ -362,14 +415,15 @@ function getInitialTranslateX(effect) {
 /**
  * Get initial translateY value based on effect
  */
-function getInitialTranslateY(effect) {
+function getInitialTranslateY(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'slideUp':
-            return 50;
+            return 50 * multiplier;
         case 'slideDown':
-            return -50;
+            return -50 * multiplier;
         case 'bounce':
-            return 30;
+            return 30 * multiplier;
         default:
             return 0;
     }
@@ -398,7 +452,15 @@ const styles = StyleSheet.create({
  * </PuffPopGroup>
  * ```
  */
-export function PuffPopGroup({ children, effect = 'scale', duration = 400, staggerDelay = 100, initialDelay = 0, easing = 'easeOut', skeleton = true, visible = true, animateOnMount = true, onAnimationComplete, onAnimationStart, style, respectReduceMotion = true, testID, staggerDirection = 'forward', horizontal = false, gap, }) {
+export function PuffPopGroup({ children, effect = 'scale', duration = 400, staggerDelay = 100, initialDelay = 0, easing = 'easeOut', skeleton = true, visible = true, animateOnMount = true, onAnimationComplete, onAnimationStart, style, respectReduceMotion = true, testID, staggerDirection = 'forward', horizontal = false, gap, 
+// Custom initial values
+initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, 
+// Reverse mode
+reverse, 
+// Animation intensity
+intensity, 
+// Exit animation settings
+exitEffect, exitDuration, exitEasing, exitDelay, }) {
     const childArray = Children.toArray(children);
     const childCount = childArray.length;
     const completedCount = useRef(0);
@@ -457,6 +519,6 @@ export function PuffPopGroup({ children, effect = 'scale', duration = 400, stagg
         }
         return baseStyle;
     }, [horizontal, gap]);
-    return (_jsx(View, { style: [styles.groupContainer, containerStyle, style], testID: testID, children: childArray.map((child, index) => (_jsx(PuffPop, { effect: effect, duration: duration, delay: getChildDelay(index), easing: easing, skeleton: skeleton, visible: visible, animateOnMount: animateOnMount, onAnimationComplete: handleChildComplete, onAnimationStart: index === 0 ? handleChildStart : undefined, respectReduceMotion: respectReduceMotion, children: child }, index))) }));
+    return (_jsx(View, { style: [styles.groupContainer, containerStyle, style], testID: testID, children: childArray.map((child, index) => (_jsx(PuffPop, { effect: effect, duration: duration, delay: getChildDelay(index), easing: easing, skeleton: skeleton, visible: visible, animateOnMount: animateOnMount, onAnimationComplete: handleChildComplete, onAnimationStart: index === 0 ? handleChildStart : undefined, respectReduceMotion: respectReduceMotion, initialOpacity: initialOpacity, initialScale: initialScale, initialRotate: initialRotate, initialTranslateX: initialTranslateX, initialTranslateY: initialTranslateY, reverse: reverse, intensity: intensity, exitEffect: exitEffect, exitDuration: exitDuration, exitEasing: exitEasing, exitDelay: exitDelay, children: child }, index))) }));
 }
 export default PuffPop;

package/lib/typescript/src/index.d.ts

@@ -83,11 +83,73 @@ export interface PuffPopProps {
      * Test ID for testing purposes
      */
     testID?: string;
+    /**
+     * Animation effect type when hiding (exit animation)
+     * If not specified, uses the reverse of the enter effect
+     */
+    exitEffect?: PuffPopEffect;
+    /**
+     * Animation duration for exit animation in milliseconds
+     * If not specified, uses the same duration as enter animation
+     */
+    exitDuration?: number;
+    /**
+     * Easing function for exit animation
+     * If not specified, uses the same easing as enter animation
+     */
+    exitEasing?: PuffPopEasing;
+    /**
+     * Delay before exit animation starts in milliseconds
+     * @default 0
+     */
+    exitDelay?: number;
+    /**
+     * Custom initial opacity value (0-1)
+     * Overrides the default initial opacity for the effect
+     */
+    initialOpacity?: number;
+    /**
+     * Custom initial scale value
+     * Overrides the default initial scale for effects like 'scale', 'zoom', 'bounce'
+     */
+    initialScale?: number;
+    /**
+     * Custom initial rotation value in degrees
+     * Overrides the default initial rotation for effects like 'rotate', 'rotateScale'
+     */
+    initialRotate?: number;
+    /**
+     * Custom initial translateX value in pixels
+     * Overrides the default initial translateX for effects like 'slideLeft', 'slideRight'
+     */
+    initialTranslateX?: number;
+    /**
+     * Custom initial translateY value in pixels
+     * Overrides the default initial translateY for effects like 'slideUp', 'slideDown'
+     */
+    initialTranslateY?: number;
+    /**
+     * If true, reverses the animation direction
+     * - slideUp becomes slide from top
+     * - slideLeft becomes slide from left
+     * - rotate spins clockwise instead of counter-clockwise
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Animation intensity multiplier (0-1)
+     * Controls how far/much elements move during animation
+     * - 1 = full animation (default)
+     * - 0.5 = half the movement distance
+     * - 0 = no movement (instant appear)
+     * @default 1
+     */
+    intensity?: number;
 }
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, onAnimationStart, style, animateOnMount, loop, loopDelay, respectReduceMotion, testID, }: PuffPopProps): ReactElement;
+export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, onAnimationStart, style, animateOnMount, loop, loopDelay, respectReduceMotion, testID, exitEffect, exitDuration, exitEasing, exitDelay, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, }: PuffPopProps): ReactElement;
 /**
  * Props for PuffPopGroup component
  */
@@ -175,6 +237,57 @@ export interface PuffPopGroupProps {
      * Gap between children (uses flexbox gap)
      */
     gap?: number;
+    /**
+     * Custom initial opacity value (0-1) for all children
+     */
+    initialOpacity?: number;
+    /**
+     * Custom initial scale value for all children
+     */
+    initialScale?: number;
+    /**
+     * Custom initial rotation value in degrees for all children
+     */
+    initialRotate?: number;
+    /**
+     * Custom initial translateX value in pixels for all children
+     */
+    initialTranslateX?: number;
+    /**
+     * Custom initial translateY value in pixels for all children
+     */
+    initialTranslateY?: number;
+    /**
+     * If true, reverses the animation direction for all children
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Animation intensity multiplier (0-1) for all children
+     * Controls how far/much elements move during animation
+     * @default 1
+     */
+    intensity?: number;
+    /**
+     * Animation effect type when hiding (exit animation) for all children
+     * If not specified, uses the reverse of the enter effect
+     */
+    exitEffect?: PuffPopEffect;
+    /**
+     * Animation duration for exit animation in milliseconds for all children
+     * If not specified, uses the same duration as enter animation
+     */
+    exitDuration?: number;
+    /**
+     * Easing function for exit animation for all children
+     * If not specified, uses the same easing as enter animation
+     */
+    exitEasing?: PuffPopEasing;
+    /**
+     * Delay before exit animation starts in milliseconds
+     * @default 0
+     */
+    exitDelay?: number;
 }
 /**
  * PuffPopGroup - Animate multiple children with staggered entrance effects
@@ -188,5 +301,5 @@ export interface PuffPopGroupProps {
  * </PuffPopGroup>
  * ```
  */
-export declare function PuffPopGroup({ children, effect, duration, staggerDelay, initialDelay, easing, skeleton, visible, animateOnMount, onAnimationComplete, onAnimationStart, style, respectReduceMotion, testID, staggerDirection, horizontal, gap, }: PuffPopGroupProps): ReactElement;
+export declare function PuffPopGroup({ children, effect, duration, staggerDelay, initialDelay, easing, skeleton, visible, animateOnMount, onAnimationComplete, onAnimationStart, style, respectReduceMotion, testID, staggerDirection, horizontal, gap, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, exitEffect, exitDuration, exitEasing, exitDelay, }: PuffPopGroupProps): ReactElement;
 export default PuffPop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-puff-pop",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A React Native animation library for revealing children components with beautiful puff and pop effects",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -135,6 +135,87 @@ export interface PuffPopProps {
    * Test ID for testing purposes
    */
   testID?: string;
+
+  // ============ Exit Animation Settings ============
+
+  /**
+   * Animation effect type when hiding (exit animation)
+   * If not specified, uses the reverse of the enter effect
+   */
+  exitEffect?: PuffPopEffect;
+
+  /**
+   * Animation duration for exit animation in milliseconds
+   * If not specified, uses the same duration as enter animation
+   */
+  exitDuration?: number;
+
+  /**
+   * Easing function for exit animation
+   * If not specified, uses the same easing as enter animation
+   */
+  exitEasing?: PuffPopEasing;
+
+  /**
+   * Delay before exit animation starts in milliseconds
+   * @default 0
+   */
+  exitDelay?: number;
+
+  // ============ Custom Initial Values ============
+
+  /**
+   * Custom initial opacity value (0-1)
+   * Overrides the default initial opacity for the effect
+   */
+  initialOpacity?: number;
+
+  /**
+   * Custom initial scale value
+   * Overrides the default initial scale for effects like 'scale', 'zoom', 'bounce'
+   */
+  initialScale?: number;
+
+  /**
+   * Custom initial rotation value in degrees
+   * Overrides the default initial rotation for effects like 'rotate', 'rotateScale'
+   */
+  initialRotate?: number;
+
+  /**
+   * Custom initial translateX value in pixels
+   * Overrides the default initial translateX for effects like 'slideLeft', 'slideRight'
+   */
+  initialTranslateX?: number;
+
+  /**
+   * Custom initial translateY value in pixels
+   * Overrides the default initial translateY for effects like 'slideUp', 'slideDown'
+   */
+  initialTranslateY?: number;
+
+  // ============ Reverse Mode ============
+
+  /**
+   * If true, reverses the animation direction
+   * - slideUp becomes slide from top
+   * - slideLeft becomes slide from left
+   * - rotate spins clockwise instead of counter-clockwise
+   * @default false
+   */
+  reverse?: boolean;
+
+  // ============ Animation Intensity ============
+
+  /**
+   * Animation intensity multiplier (0-1)
+   * Controls how far/much elements move during animation
+   * - 1 = full animation (default)
+   * - 0.5 = half the movement distance
+   * - 0 = no movement (instant appear)
+   * @default 1
+   */
+  intensity?: number;
 }
 
 /**
@@ -178,13 +259,52 @@ export function PuffPop({
   loopDelay = 0,
   respectReduceMotion = true,
   testID,
+  // Exit animation settings
+  exitEffect,
+  exitDuration,
+  exitEasing,
+  exitDelay = 0,
+  // Custom initial values
+  initialOpacity,
+  initialScale,
+  initialRotate,
+  initialTranslateX,
+  initialTranslateY,
+  // Reverse mode
+  reverse = false,
+  // Animation intensity
+  intensity = 1,
 }: PuffPopProps): ReactElement {
+  // Clamp intensity between 0 and 1
+  const clampedIntensity = Math.max(0, Math.min(1, intensity));
+
+  // Helper to get initial value with custom override, reverse, and intensity support
+  const getInitialOpacityValue = () => initialOpacity ?? 0;
+  const getInitialScaleValue = (eff: PuffPopEffect) => {
+    if (initialScale !== undefined) return initialScale;
+    const baseScale = getInitialScale(eff, reverse);
+    // Scale goes from baseScale to 1, so we interpolate: 1 - (1 - baseScale) * intensity
+    return 1 - (1 - baseScale) * clampedIntensity;
+  };
+  const getInitialRotateValue = (eff: PuffPopEffect) => {
+    if (initialRotate !== undefined) return initialRotate;
+    return getInitialRotate(eff, reverse) * clampedIntensity;
+  };
+  const getInitialTranslateXValue = (eff: PuffPopEffect) => {
+    if (initialTranslateX !== undefined) return initialTranslateX;
+    return getInitialTranslateX(eff, reverse) * clampedIntensity;
+  };
+  const getInitialTranslateYValue = (eff: PuffPopEffect) => {
+    if (initialTranslateY !== undefined) return initialTranslateY;
+    return getInitialTranslateY(eff, reverse) * clampedIntensity;
+  };
+
   // Animation values
-  const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
-  const scale = useRef(new Animated.Value(animateOnMount ? getInitialScale(effect) : 1)).current;
-  const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotate(effect) : 0)).current;
-  const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateX(effect) : 0)).current;
-  const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateY(effect) : 0)).current;
+  const opacity = useRef(new Animated.Value(animateOnMount ? getInitialOpacityValue() : 1)).current;
+  const scale = useRef(new Animated.Value(animateOnMount ? getInitialScaleValue(effect) : 1)).current;
+  const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotateValue(effect) : 0)).current;
+  const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateXValue(effect) : 0)).current;
+  const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateYValue(effect) : 0)).current;
   
   // For non-skeleton mode
   const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
@@ -218,16 +338,25 @@ export function PuffPop({
 
   // Effective duration (0 if reduce motion is enabled)
   const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : duration;
+  const effectiveExitDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : (exitDuration ?? duration);
+
+  // Helper to get effect flags for any effect type
+  const getEffectFlags = useCallback((eff: PuffPopEffect) => ({
+    hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(eff),
+    hasRotate: ['rotate', 'rotateScale'].includes(eff),
+    hasFlip: eff === 'flip',
+    hasTranslateX: ['slideLeft', 'slideRight'].includes(eff),
+    hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(eff),
+    hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(eff),
+  }), []);
 
   // Memoize effect type checks to avoid repeated includes() calls
-  const effectFlags = useMemo(() => ({
-    hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect),
-    hasRotate: ['rotate', 'rotateScale'].includes(effect),
-    hasFlip: effect === 'flip',
-    hasTranslateX: ['slideLeft', 'slideRight'].includes(effect),
-    hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(effect),
-    hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(effect),
-  }), [effect]);
+  const effectFlags = useMemo(() => getEffectFlags(effect), [effect, getEffectFlags]);
+  
+  // Exit effect flags (use exitEffect if specified, otherwise same as enter effect)
+  const exitEffectFlags = useMemo(() => 
+    exitEffect ? getEffectFlags(exitEffect) : effectFlags
+  , [exitEffect, getEffectFlags, effectFlags]);
 
   // Memoize interpolations to avoid recreating on every render
   const rotateInterpolation = useMemo(() => 
@@ -261,12 +390,19 @@ export function PuffPop({
         onAnimationStart();
       }
 
-      const easingFn = getEasing(easing);
+      // Determine which effect settings to use based on direction
+      const currentEffect = toVisible ? effect : (exitEffect ?? effect);
+      const currentDuration = toVisible ? effectiveDuration : effectiveExitDuration;
+      const currentEasing = toVisible ? easing : (exitEasing ?? easing);
+      const currentDelay = toVisible ? delay : exitDelay;
+      const currentFlags = toVisible ? effectFlags : exitEffectFlags;
+
+      const easingFn = getEasing(currentEasing);
       // When skeleton is false, we animate height which doesn't support native driver
       // So we must use JS driver for all animations in that case
       const useNative = skeleton;
       const config = {
-        duration: effectiveDuration,
+        duration: currentDuration,
         easing: easingFn,
         useNativeDriver: useNative,
       };
@@ -282,20 +418,20 @@ export function PuffPop({
       );
 
       // Scale animation
-      if (effectFlags.hasScale) {
-        const targetScale = toVisible ? 1 : getInitialScale(effect);
+      if (currentFlags.hasScale) {
+        const targetScale = toVisible ? 1 : getInitialScaleValue(currentEffect);
         animations.push(
           Animated.timing(scale, {
             toValue: targetScale,
             ...config,
-            easing: effect === 'bounce' ? Easing.bounce : easingFn,
+            easing: currentEffect === 'bounce' ? Easing.bounce : easingFn,
           })
         );
       }
 
       // Rotate animation
-      if (effectFlags.hasRotate || effectFlags.hasFlip) {
-        const targetRotate = toVisible ? 0 : getInitialRotate(effect);
+      if (currentFlags.hasRotate || currentFlags.hasFlip) {
+        const targetRotate = toVisible ? 0 : getInitialRotateValue(currentEffect);
         animations.push(
           Animated.timing(rotate, {
             toValue: targetRotate,
@@ -305,8 +441,8 @@ export function PuffPop({
       }
 
       // TranslateX animation
-      if (effectFlags.hasTranslateX) {
-        const targetX = toVisible ? 0 : getInitialTranslateX(effect);
+      if (currentFlags.hasTranslateX) {
+        const targetX = toVisible ? 0 : getInitialTranslateXValue(currentEffect);
         animations.push(
           Animated.timing(translateX, {
             toValue: targetX,
@@ -316,8 +452,8 @@ export function PuffPop({
       }
 
       // TranslateY animation
-      if (effectFlags.hasTranslateY) {
-        const targetY = toVisible ? 0 : getInitialTranslateY(effect);
+      if (currentFlags.hasTranslateY) {
+        const targetY = toVisible ? 0 : getInitialTranslateYValue(currentEffect);
         animations.push(
           Animated.timing(translateY, {
             toValue: targetY,
@@ -332,7 +468,7 @@ export function PuffPop({
         animations.push(
           Animated.timing(animatedHeight, {
             toValue: targetHeight,
-            duration: effectiveDuration,
+            duration: currentDuration,
             easing: easingFn,
             useNativeDriver: false,
           })
@@ -344,11 +480,11 @@ export function PuffPop({
 
       // Reset values function for looping
       const resetValues = () => {
-        opacity.setValue(0);
-        scale.setValue(getInitialScale(effect));
-        rotate.setValue(getInitialRotate(effect));
-        translateX.setValue(getInitialTranslateX(effect));
-        translateY.setValue(getInitialTranslateY(effect));
+        opacity.setValue(getInitialOpacityValue());
+        scale.setValue(getInitialScaleValue(effect));
+        rotate.setValue(getInitialRotateValue(effect));
+        translateX.setValue(getInitialTranslateXValue(effect));
+        translateY.setValue(getInitialTranslateYValue(effect));
         if (!skeleton && measuredHeight !== null) {
           animatedHeight.setValue(0);
         }
@@ -357,9 +493,9 @@ export function PuffPop({
       // Build the animation sequence
       let animation: Animated.CompositeAnimation;
       
-      if (delay > 0) {
+      if (currentDelay > 0) {
         animation = Animated.sequence([
-          Animated.delay(delay),
+          Animated.delay(currentDelay),
           parallelAnimation,
         ]);
       } else {
@@ -430,9 +566,14 @@ export function PuffPop({
     [
       delay,
       effectiveDuration,
+      effectiveExitDuration,
       easing,
       effect,
       effectFlags,
+      exitEffect,
+      exitEffectFlags,
+      exitEasing,
+      exitDelay,
       measuredHeight,
       onAnimationComplete,
       onAnimationStart,
@@ -543,7 +684,8 @@ export function PuffPop({
 /**
  * Get initial scale value based on effect
  */
-function getInitialScale(effect: PuffPopEffect): number {
+function getInitialScale(effect: PuffPopEffect, _reverse = false): number {
+  // Scale doesn't change with reverse (parameter kept for consistent API)
   switch (effect) {
     case 'scale':
     case 'rotateScale':
@@ -562,14 +704,15 @@ function getInitialScale(effect: PuffPopEffect): number {
 /**
  * Get initial rotate value based on effect
  */
-function getInitialRotate(effect: PuffPopEffect): number {
+function getInitialRotate(effect: PuffPopEffect, reverse = false): number {
+  const multiplier = reverse ? -1 : 1;
   switch (effect) {
     case 'rotate':
-      return -360;
+      return -360 * multiplier;
     case 'rotateScale':
-      return -180;
+      return -180 * multiplier;
     case 'flip':
-      return -180;
+      return -180 * multiplier;
     default:
       return 0;
   }
@@ -578,12 +721,13 @@ function getInitialRotate(effect: PuffPopEffect): number {
 /**
  * Get initial translateX value based on effect
  */
-function getInitialTranslateX(effect: PuffPopEffect): number {
+function getInitialTranslateX(effect: PuffPopEffect, reverse = false): number {
+  const multiplier = reverse ? -1 : 1;
   switch (effect) {
     case 'slideLeft':
-      return 100;
+      return 100 * multiplier;
     case 'slideRight':
-      return -100;
+      return -100 * multiplier;
     default:
       return 0;
   }
@@ -592,14 +736,15 @@ function getInitialTranslateX(effect: PuffPopEffect): number {
 /**
  * Get initial translateY value based on effect
  */
-function getInitialTranslateY(effect: PuffPopEffect): number {
+function getInitialTranslateY(effect: PuffPopEffect, reverse = false): number {
+  const multiplier = reverse ? -1 : 1;
   switch (effect) {
     case 'slideUp':
-      return 50;
+      return 50 * multiplier;
     case 'slideDown':
-      return -50;
+      return -50 * multiplier;
     case 'bounce':
-      return 30;
+      return 30 * multiplier;
     default:
       return 0;
   }
@@ -721,6 +866,76 @@ export interface PuffPopGroupProps {
    * Gap between children (uses flexbox gap)
    */
   gap?: number;
+
+  // ============ Custom Initial Values ============
+
+  /**
+   * Custom initial opacity value (0-1) for all children
+   */
+  initialOpacity?: number;
+
+  /**
+   * Custom initial scale value for all children
+   */
+  initialScale?: number;
+
+  /**
+   * Custom initial rotation value in degrees for all children
+   */
+  initialRotate?: number;
+
+  /**
+   * Custom initial translateX value in pixels for all children
+   */
+  initialTranslateX?: number;
+
+  /**
+   * Custom initial translateY value in pixels for all children
+   */
+  initialTranslateY?: number;
+
+  // ============ Reverse Mode ============
+
+  /**
+   * If true, reverses the animation direction for all children
+   * @default false
+   */
+  reverse?: boolean;
+
+  // ============ Animation Intensity ============
+
+  /**
+   * Animation intensity multiplier (0-1) for all children
+   * Controls how far/much elements move during animation
+   * @default 1
+   */
+  intensity?: number;
+
+  // ============ Exit Animation Settings ============
+
+  /**
+   * Animation effect type when hiding (exit animation) for all children
+   * If not specified, uses the reverse of the enter effect
+   */
+  exitEffect?: PuffPopEffect;
+
+  /**
+   * Animation duration for exit animation in milliseconds for all children
+   * If not specified, uses the same duration as enter animation
+   */
+  exitDuration?: number;
+
+  /**
+   * Easing function for exit animation for all children
+   * If not specified, uses the same easing as enter animation
+   */
+  exitEasing?: PuffPopEasing;
+
+  /**
+   * Delay before exit animation starts in milliseconds
+   * @default 0
+   */
+  exitDelay?: number;
 }
 
 /**
@@ -753,6 +968,21 @@ export function PuffPopGroup({
   staggerDirection = 'forward',
   horizontal = false,
   gap,
+  // Custom initial values
+  initialOpacity,
+  initialScale,
+  initialRotate,
+  initialTranslateX,
+  initialTranslateY,
+  // Reverse mode
+  reverse,
+  // Animation intensity
+  intensity,
+  // Exit animation settings
+  exitEffect,
+  exitDuration,
+  exitEasing,
+  exitDelay,
 }: PuffPopGroupProps): ReactElement {
   const childArray = Children.toArray(children);
   const childCount = childArray.length;
@@ -838,6 +1068,17 @@ export function PuffPopGroup({
           onAnimationComplete={handleChildComplete}
           onAnimationStart={index === 0 ? handleChildStart : undefined}
           respectReduceMotion={respectReduceMotion}
+          initialOpacity={initialOpacity}
+          initialScale={initialScale}
+          initialRotate={initialRotate}
+          initialTranslateX={initialTranslateX}
+          initialTranslateY={initialTranslateY}
+          reverse={reverse}
+          intensity={intensity}
+          exitEffect={exitEffect}
+          exitDuration={exitDuration}
+          exitEasing={exitEasing}
+          exitDelay={exitDelay}
         >
           {child}
         </PuffPop>