React animation example
React Page Transition: Shared Element (Hero) Animation
A shared element transition keeps the thing you tapped on screen while the page changes around it, which tells people where they came from. Here a grid of cards opens into a detail page: the card's image becomes the header, the rest of the page fades in after it, and tapping back reverses the whole move.
- 4.6 KB file
- 5 live inputs
- React runtime
How this shared element transition works
- The opened card's rectangle is interpolated from its grid slot to the full stage with an under-damped spring.
- Detail content waits until the spring is 60% of the way there, so it never overlaps the moving card.
- Events "open" and "close" fire with each transition, ready for your router or analytics.
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-page-transition.bexode goes in /public (download it below)
export function ReactPageTransition() {
return (
<ExodeUICanvas
src="/react-page-transition.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'open', 'close'
}}
style={{ width: '100%', height: 540 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
stiffness | Number | 170 | 60 – 400 |
damping | Number | 18 | 6 – 40 |
accent | Text | #f97316 | hex colour |
ink | Text | #fafafa | hex colour |
bg | Text | #0c0a09 | hex colour |
Events: openclose
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.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.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.
The same idea in other frameworks: Flutter hero product transition · JavaScript curtain wipe transition · Vue slide and fade route transition