Peek Drawer Pro
INTRO
PeekDrawerPro is an advanced and customizable drawer and floating panel component for React (Framer). It offers two modes (Floating and Drawer), allowing full control over the behavior, appearance, and interaction of the panels. The component is ideal for creating side panels, floating widgets, and full-screen drawers.
KEY FEATURES
Three Hybrid Layouts — Slideshow (Slide/Fade + animated side peek with tween/spring), Ticker (infinite scroll), Masonry (responsive grid + optional loop)
Canvas Components Pro — Render frames/videos/components as full content, or extract images only
CMS-Native + 20 Top-Level Fields — Link Gallery CMS directly; instant-control CMS overrides
Animated Side Peek Previews — Show adjacent slides at edges with smooth transitions (tween/spring easing)
Complete Visual Controls — Customize dots, arrows, fade transitions, hover effects, fade edges, overflow
Advanced Momentum Drag — Physics-based momentum with drag power, elasticity, time constant
15 Fade Transition Modes — Opacity, Slide, Scale, Blur and all combinations + custom Bezier curves
Infinite Masonry Loop — Repeat grid items for continuous scrolling
Accessibility Ready — ARIA attributes, keyboard navigation, responsive
DESCRIPTION
A flexible panel component for Framer with two modes:
Floating Peek: a docked, draggable panel that “peeks” from the screen edge (you always keep part of the handle visible when closed).
ClickDraw: a classic drawer that slides in from any side with an overlay/backdrop and optional drag-to-close gestures.
Connect Handle/Trigger and Panel Content directly from the Canvas (ComponentInstance), then customize docking, peek amount, sizing (fit/custom), portal/z-index, scrim, header/close button, scroll locking, and spring motion.
1. Mode — Choose the Panel Type
The mode property defines the core behavior of the component.
mode→ Enum:'floating','drawer'
Controls the operating mode of the panel. Choose between:floating: A panel that floats and can be docked to the viewport edges.drawer: A sliding drawer that opens from any side of the screen.
Example: Set mode="floating" for a draggable panel or mode="drawer" for a sliding panel.
2. Floating Mode Controls
Available when mode = "floating".
Docking Behavior
floatingDock→ Enum:'auto','left','right','top','bottom'
Specifies where the floating panel will dock relative to the viewport. The default value is'auto', which auto-selects the nearest edge.floatingAllowedEdges→ Enum:'sides','vertical','all'
Defines which edges the panel can dock to in auto mode.'sides'allows only left and right, while'vertical'limits it to top and bottom.
Panel Positioning
floatingStartPosMode→ Enum:'px','percent'
Determines the mode for setting the initial position of the panel. Use'px'for absolute pixels or'percent'for a percentage-based position.floatingStartPosPx→ Number:200
The initial pixel position whenfloatingStartPosMode = 'px'.floatingStartPosPercent→ Number:25
The initial position as a percentage of the available viewport space whenfloatingStartPosMode = 'percent'.
Peek Effect
floatingPeekVisible→ Number:100
Controls how much of the handle remains visible when the panel is closed. You can set this in pixels or as a percentage.floatingPeekUnit→ Enum:'px','%'
Defines the unit of measurement for the peek effect.
Handle Settings
floatingHandleSource→ Enum:'connected','internal'
Specifies the handle's source.'connected'uses an external trigger, while'internal'uses an internal handle.floatingHandleVisibility→ Enum:'always','open','closed','hidden'
Determines when the handle is visible. You can make the handle always visible, only visible when open, or hidden.
Example: Set floatingHandleVisibility="always" to keep the handle always visible.
3. Drawer Mode Controls
Available when mode = "drawer".
Slide Direction
drawer.slide→ Enum:'left','right','top','bottom'
Specifies the direction from which the drawer will slide into view.
Example: Use drawer.slide="left" for a drawer that slides in from the left.
Trigger Source
drawer.triggerSource→ Enum:'connected','internal'
Defines whether the drawer opens via an external or internal trigger.
Panel Size
drawer.sizeMode→ Enum:'fit','custom'
Controls the sizing behavior of the drawer. Set to'fit'for auto-sizing or'custom'for custom width/height.drawer.widthPx→ Number:360
Defines the drawer width in pixels whensizeMode = 'custom'.drawer.heightPx→ Number:640
Defines the drawer height in pixels whensizeMode = 'custom'.
Overlay Settings
drawer.overlayColor→ String:'rgba(0, 0, 0, 0.25)'
Specifies the color of the backdrop behind the drawer.drawer.closeOnBackdrop→ Boolean:true
Determines whether clicking on the backdrop closes the drawer.
4. Global Controls
Behavior
behavior.closeOnEscape→ Boolean:true
Allows the panel to close when the ESC key is pressed.behavior.portalMode→ Enum:'auto','never'
Controls whether the component is rendered via portal for stacking context issues.behavior.zIndex→ Number:999999
Defines the z-index for the panel, ensuring it stays on top of other elements.
Shadow
shadow.enabled→ Boolean:true
Enables or disables the shadow effect on the panel.shadow.x→ Number:0
Defines the horizontal offset for the shadow.shadow.y→ Number:4
Defines the vertical offset for the shadow.shadow.blur→ Number:16
Defines the blur radius for the shadow.shadow.color→ String:'rgba(0, 0, 0, 0.1)'
Defines the color of the shadow.
