Docsanimate presence
✨ <AnimatePresence />
The AnimatePresence component extends Framer Motion's mounting logic with specialized physical exit animations.
🛠️ Usage
import { AnimatePresence, vibe } from 'vibedev-motion';
function ItemList({ items }) {
return (
<AnimatePresence>
{items.map(item => (
<vibe.div
key={item.id}
physics={true}
physicsExit={{ force: [0, -500], random: 100 }}
>
{item.text}
</vibe.div>
))}
</AnimatePresence>
);
}
🧠 Features
- Physical Exit: When a child is removed, it remains in the DOM temporarily while a "shatter" or "eject" force is applied to the physical body.
- Natural Unmounting: After the physical animation (e.g., falling off-screen), the element is automatically removed from React.
🌟 Detailed Use Case
Physics-Based Item Deletion: In a task list, when you delete an item, instead of a simple fade-out, it "falls" down out of the list as if gravity just took hold. This adds a tangible, satisfying weight to user actions.