React animation example
React Animated Modal: Spring Pop-Up Dialog
A modal should come from somewhere. This dialog grows out of the button that opened it, scaling on a spring while the page behind it dims and shrinks slightly to push it back in space. Clicking the backdrop or the cancel button reverses the motion into the same button.
- 4.5 KB file
- 6 live inputs
- React runtime
How this spring modal works
- The dialog's origin is the trigger button's centre; scale and position spring from there to the middle.
- The page behind scales to 96% and dims, which reads as depth without a heavy blur.
- "confirm" and "dismiss" events fire from the two buttons; the open state is an input.
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-modal.bexode goes in /public (download it below)
export function ReactAnimatedModal() {
return (
<ExodeUICanvas
src="/react-animated-modal.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'confirm', 'dismiss'
}}
style={{ width: '100%', height: 520 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
open | Boolean | false | — |
heading | Text | Delete project? | — |
body | Text | This removes the file for everyone on your team. | — |
accent | Text | #ef4444 | hex colour |
ink | Text | #fafafa | hex colour |
bg | Text | #0c0c0e | hex colour |
Events: confirmdismiss
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.