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.

© 2026 Synthron AI Technologies. All rights reserved.

Developed & Maintained by Synthron