Morphing Pill Menu
A compact Menu pill that grows into the whole navigation panel when clicked - no overlay stacked on top, the pill itself morphs open. Links cascade in letter by letter, roll on hover, and an image slot inside is ready to link anywhere.
One of 65 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The surface morphs by animating its real width, height and border-radius between two fixed measured states - a deliberate exception to the transforms-only rule. A transform scale would stretch the corner radius, the backdrop blur and everything clipped inside; animating the real box keeps the fixed-pixel radius crisp and re-blurs the backdrop live on every frame, which is what makes the glass read as glass while it grows. The panel inside is a fixed-size box, so nothing reflows during the tween - the surface only clips more of it.
Interactivity is gated per element, not globally. Each nav link unlocks its hover roll the moment its own entrance lands, and a cursor already parked on a link fires the roll right then - so the first link is responsive while the last is still cascading in and the spring is still settling. One global animating flag would deaden the whole menu for the full timeline and read as lag.
Menu and Close are not two buttons swapped - they are two labels stacked inside one roller parent behind an overflow mask, and open/close rolls the parent between them. The dot-grid and the x glyph ride an identical roller inside the icon circle. Because the toggle itself never moves or resizes, the control stays in the exact same place through the whole morph, which is what makes the pill and the panel feel like one object.
What you'll need.
Install
- GSAP
- CustomEase
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Morphing Pill Menu work with React and Vue?
- Morphing Pill Menu ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Morphing Pill Menu?
- Yes. Morphing Pill Menu is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Morphing Pill Menu without editing code?
- Morphing Pill Menu exposes 3 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Morphing Pill Menu free?
- Morphing Pill Menu is part of the Annnimate Library, a paid subscription (from EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- Can I use Morphing Pill Menu in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Morphing Pill Menu on as many projects as you build, with no attribution required.
- Does Morphing Pill Menu respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
