JavaScript animation example
JavaScript Page Transition: Curtain Wipe Between Pages
A curtain wipe hides the moment a page changes, which is useful when the next page needs a beat to load. Four panels sweep in from the bottom one after another, the new page is swapped in while the screen is covered, and the panels continue upward to reveal it. The page title rides on the last panel.
- 4.4 KB file
- 5 live inputs
- JavaScript runtime
How this curtain wipe transition works
- Each panel's position is the same eased curve offset in time, which gives the stagger.
- The content swaps at the moment all panels cover the screen, so the change is never visible.
- Click a nav link to run it; "navigate" fires when the swap happens.
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-page-transition" style="width: 100%; height: 540px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-page-transition',
fit: 'Layout',
onReady: (engine) => { },
onTrigger: (name) => {
// fires: 'navigate'
},
});
player.load(await (await fetch('/javascript-page-transition.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
pages | Text | Home,Work,About,Contact | — |
duration | Number | 1.1 | 0.5 – 2.5 |
accent | Text | #4f46e5 | hex colour |
ink | Text | #111827 | hex colour |
bg | Text | #fafaf9 | hex colour |
Events: navigate
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.
The same idea in other frameworks: React shared element transition · Flutter hero product transition · Vue slide and fade route transition