---
title: "Drawer Popup — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Navigation. Animated Side Panel with Staggee Effect"
canonical: "https://framer.elliotli.dev/component/drawer-popup"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Drawer Popup

# Drawer Popup

Animated side drawer with stagger

[View on Framer](https://framer.com/marketplace/components/drawer-popup/?via=elliot-li)

![Drawer Popup preview image 1](https://framer.elliotli.dev/og/component/drawer-popup/676e35fa858935f8/1600x1200.jpg)

## Summary

Animated Side Panel with Staggee Effect

## Description

A fully customizable drawer component with smooth spring animations, staggered content reveals, and support for all four directions.A production-ready drawer component inspired by shadcn/ui and Vaul, rebuilt from scratch for Framer with zero dependencies beyond framer-motion.

**✦ Open from any direction** Slide in from top, bottom, left, or right. Perfect for mobile menus, settings panels, cart sidebars, or modal-style content.

**✦ Staggered animations** Each element animates in sequence with customizable timing and direction. Control the delay between items and choose whether content animates up or down for that polished, intentional feel.

**✦ Flexible content placement** Position your header and copy at the top or bottom of the drawer. Adapts to your layout needs whether you're building a confirmation modal, onboarding flow, or upgrade prompt.

**✦ Full styling control** Customize everything from the property panel — colors, border radius, padding, overlay opacity, and drawer size. No code required.

**Features:** — 4 slide directions (top, right, bottom, left) — Spring-based open/close animations — Staggered content reveal with adjustable timing — Click-outside to close — Scroll lock when open — Handle bar for bottom/top sheets — 3 customizable paragraphs with show/hide toggles — Fully styled trigger button — Submit and cancel actions

**Perfect for:** — Mobile navigation menus — Settings or filter panels — Shopping cart sidebars — Upgrade/pricing prompts — Onboarding flows — Confirmation dialogsUpdate 06 June: added native Framer Typ Controll, now you can choose your Font Style, size style for all the copy on the component.Update: Now you can customise all the Typ, Size, and Fonts styles.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5514

## Details

- **Author**: Francisc Toth
- **Published**: 2026-02-11
- **Updated**: 2026-09-14
- **Added**: 2026-01-21
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation