Panel Wipe Page Intro
Page transitions · PasteMotion original
- Original
- GPU-friendly
- Vanilla JS
- Reduced-motion ready
Curtain Wipe Transition
A colour curtain wipes across, the page swaps underneath, and the curtain wipes away. Motion.
- Original
- GPU-friendly
- Motion
- Reduced-motion ready
- Customisable
- 1.5 KB gzip
An original by PasteMotion · MIT License
Code
<div class="wipe-transition" data-demo>
<nav class="wipe-transition__nav" aria-label="Pages">
<button class="wipe-transition__link" type="button" aria-current="page" data-page="0">Home</button>
<button class="wipe-transition__link" type="button" data-page="1">Work</button>
<button class="wipe-transition__link" type="button" data-page="2">About</button>
</nav>
<main class="wipe-transition__page">
<h2 class="wipe-transition__title">Home</h2>
<p class="wipe-transition__text">Click a link: a panel wipes across, the page swaps underneath, and the panel wipes away.</p>
</main>
<div class="wipe-transition__curtain" aria-hidden="true"></div>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
- Load Motion from the CDN (see the JS tab), then add the script.
- Adjust the custom properties (--accent, --color-2) on .wipe-transition to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Underline Draw Links
Hover effects · PasteMotion original
- Original
- GPU-friendly
- No JS
- Reduced-motion ready
Aurora Mesh Background
Backgrounds · PasteMotion original
- Original
- GPU-friendly
- No JS
- Reduced-motion ready
Success Check Draw
Loaders · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Trailing Cursor Ring
Cursors · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Cursor Spotlight Reveal
Cursors · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready