React Recipe • Production Pattern
React Animated Close Button: Smooth Morphing Menu & Dismiss Interactions
An animated close button is one of the most critical micro-interactions in modern web and mobile apps. While static close icons or animated GIFs lack interactivity, ExodeUI provides a responsive state-machine close button that seamlessly morphs between hamburger menus, chevron toggles, and dismiss Xs. Driven by physics-based springs and keyboard-accessible states, ExodeUI close buttons provide instant feedback on hover, press, and toggle without brittle CSS hacks.
Runnable ExodeUI React Code Example
Production ReadyImport the ExodeUICanvas component directly into your React application tree. Wire states, triggers, and parameters declaratively:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function NavigationToggle() {
const [isOpen, setIsOpen] = useState(false);
return (
<button
onClick={() => setIsOpen(!isOpen)}
aria-label={isOpen ? 'Close menu' : 'Open menu'}
className="nav-toggle-btn"
>
<ExodeUICanvas
src="/scenes/close-button-morph.json"
stateMachine="MenuToClose"
inputs={{ "isOpen": isOpen }}
onStateChange={(state) => {
console.log('Close button state:', state);
}}
/>
</button>
);
}Frequently Asked Questions about animated close button
Why use a state machine for an animated close button instead of CSS?
CSS hover or keyframe animations reset abruptly if interrupted during user clicks. ExodeUI’s state machine tracks exact pointer velocity and interpolates seamlessly from any intermediate position, guaranteeing a tactile, fluid morph.
Can an animated close button maintain keyboard accessibility (a11y)?
Yes. Wrap the ExodeUICanvas inside a standard semantic HTML <button> with proper aria-expanded and aria-label attributes, allowing complete keyboard tab navigation and screen reader support.
How do I trigger the close button morph in React?
Pass a boolean prop (e.g. isOpen) to the inputs object of the ExodeUICanvas component. The internal state machine will handle the transition between the open and closed states automatically.