Draggable Pill Menu

by Vanguardia · motionprompts.dev

Pill-shaped floating menu drawer that can be dragged anywhere in the viewport with GSAP Draggable (bounds: window); a dashed drop-zone outline fades in within a 200px snap threshold of its origin and the drawer springs back to its corner with power2.out on release. Clicking the hamburger toggler expands the pill: the items row animates from width 0 to full width (power3.inOut, 0.5s) while each link fades and scales in with a 0.05s stagger, reversed from the end on close.

Type: Web motion
Framework: GSAP
Trigger: drag
Duration: 0.1–0.5s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, Draggable

draggable pill menu with snap-back and staggered expand

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,728 charsCustomize

# Draggable Pill Menu — Drag-Anywhere Drawer + Snap-Back Drop Zone + Expanding Hamburger

## Goal
Build a small **pill-shaped floating menu drawer** docked in t…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.