React animation example
React Animated Menu: Hamburger to Close Morph
A mobile menu has three moving parts that should feel like one gesture: the icon, the panel and the links. Here the hamburger's bars rotate into an X as a panel expands from the corner, then each link slides in 60 ms after the one above it. Hovering a link moves an indicator to it.
- 4.4 KB file
- 5 live inputs
- React runtime
How this morphing hamburger menu works
- Open progress is a single spring; the icon, panel radius and each link read from it with their own offsets.
- Links are staggered by index, so adding a link to the input list keeps the rhythm.
- Clicking a link fires "navigate" with the link label and closes the menu.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-animated-menu.bexode goes in /public (download it below)
export function ReactAnimatedMenu() {
return (
<ExodeUICanvas
src="/react-animated-menu.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'navigate'
}}
style={{ width: '100%', height: 520 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
open | Boolean | false | — |
links | Text | Product,Pricing,Docs,Blog,Contact | — |
accent | Text | #22c55e | hex colour |
ink | Text | #f8fafc | hex colour |
bg | Text | #0b1110 | hex colour |
Events: navigate
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: Flutter 3d drawer menu · Flutter morphing icons · SwiftUI context menu pop