Elastic Pull Drawer

Installation

Mechanics

This component implements fluid, native-feeling physics using framer-motion:

1. Rubber-band Resistance: The dragElastic={0.4} property maps cursor movement beyond the dragConstraints boundaries to a dampened logarithm, making it feel like pulling against a heavy rubber band.
2. Velocity Snapping: By listening to onDragEnd and analyzing info.velocity.y, we can determine if the user flicked the drawer down quickly enough to close it, even if they didn't drag it very far.
3. Handle Isolation: useDragControls is applied so that dragging the main scrollable content doesn't accidentally move the drawer; dragging is strictly bound to the top handlebar.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ElasticDrawer } from "@/components/creative/elastic-drawer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ElasticDrawer } from "@/components/creative/elastic-drawer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ElasticDrawer
        isOpen{true}
        onClose{/* value */}
        title="example"
      >
        <div>Content goes here</div>
      </ElasticDrawer>
    </div>
  );
}