Slide Transition
A directional slide that communicates sequence. The spatial metaphor helps users follow linear flows like onboarding and multi-step wizards.
Slide Transition the 2nd of 11 designs in the 11 CSS Page Transitions collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<div class="scene">
<!-- Phone mockup -->
<div class="phone">
<div class="slider-viewport">
<div class="slider-track" id="track">
<!-- Slide 1 -->
<div class="slide slide-1">
<div class="slide-icon">⚡</div>
<div class="slide-step">01 / 04</div>
<h2 class="slide-title">Welcome to <span class="accent">Flux</span></h2>
<p class="slide-body">The creative workspace that adapts to how you think — not the other way around.</p>
<div class="pill-row">
<span class="pill">AI-powered</span>
<span class="pill">Real-time sync</span>
<span class="pill">Offline first</span>
</div>
<div class="slide-footer">
<div class="dots">
<div class="dot dot-1 active" id="d1"></div>
<div class="dot dot-2" id="d2"></div>
<div class="dot dot-3" id="d3"></div>
<div class="dot dot-4" id="d4"></div>
</div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="skip()">Skip</button>
<button class="btn btn-primary" onclick="next()">Continue →</button>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide slide-2">
<div class="slide-icon">🧠</div>
<div class="slide-step">02 / 04</div>
<h2 class="slide-title">Ideas that <span class="accent">connect</span></h2>
<p class="slide-body">Flux maps relationships between your thoughts automatically. Watch patterns emerge as you work.</p>
<div class="pill-row">
<span class="pill">Knowledge graph</span>
<span class="pill">Smart links</span>
</div>
<div class="slide-footer">
<div class="dots">
<div class="dot" id="d1b"></div>
<div class="dot active dot-1" id="d2b"></div>
<div class="dot" id="d3b"></div>
<div class="dot" id="d4b"></div>
</div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="prev()">← Back</button>
<button class="btn btn-primary" onclick="next()">Continue →</button>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide slide-3">
<div class="slide-icon">🔒</div>
<div class="slide-step">03 / 04</div>
<h2 class="slide-title">Your data, <span class="accent">yours</span></h2>
<p class="slide-body">End-to-end encrypted. Zero-knowledge architecture. We literally cannot read your notes — and we wouldn't want to.</p>
<div class="pill-row">
<span class="pill">E2E encrypted</span>
<span class="pill">Zero-knowledge</span>
<span class="pill">GDPR ready</span>
</div>
<div class="slide-footer">
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot active dot-1"></div>
<div class="dot"></div>
</div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="prev()">← Back</button>
<button class="btn btn-primary" onclick="next()">Continue →</button>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="slide slide-4">
<div class="slide-icon">🚀</div>
<div class="slide-step">04 / 04</div>
<h2 class="slide-title">Ready to <span class="accent">launch</span></h2>
<p class="slide-body">You're all set. Create your workspace and start building something extraordinary today.</p>
<div class="pill-row">
<span class="pill">Free 14-day trial</span>
<span class="pill">No card needed</span>
</div>
<div class="slide-footer">
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot active dot-1"></div>
</div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="prev()">← Back</button>
</div>
<button class="btn-finish" style="display:block">Get Started Free</button>
</div>
</div>
</div><!-- /slider-track -->
</div><!-- /slider-viewport -->
</div><!-- /phone -->
</div> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0a0f;
--surface: #13131a;
--border: #1e1e2e;
--text: #e8e8f0;
--muted: #5c5c78;
--accent-1: #6c63ff;
--accent-2: #ff6584;
--accent-3: #43e97b;
--accent-4: #ffd700;
--slide-dur: 500ms;
--slide-ease: cubic-bezier(0.77, 0, 0.175, 1);
}
html, body {
height: 100%; background: var(--bg);
font-family: 'Syne', sans-serif;
color: var(--text);
overflow: hidden;
}
/* Scene — centers the phone */
.scene {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 60% 40% at 20% 20%, rgba(108,99,255,0.12) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,101,132,0.08) 0%, transparent 60%),
var(--bg);
padding: 24px;
}
.phone {
width: 340px;
height: 680px;
background: var(--surface);
border-radius: 44px;
border: 1px solid var(--border);
overflow: hidden;
position: relative;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04),
0 40px 80px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.08);
flex-shrink: 0;
}
/* Notch */
.phone::before {
content: '';
position: absolute;
top: 16px; left: 50%;
transform: translateX(-50%);
width: 110px; height: 30px;
background: var(--bg);
border-radius: 20px;
z-index: 10;
}
/* Slide viewport */
.slider-viewport {
position: absolute;
inset: 0;
overflow: hidden;
}
.slider-track {
display: flex;
height: 100%;
transition: transform var(--slide-dur) var(--slide-ease);
will-change: transform;
}
.slide {
min-width: 340px;
height: 100%;
display: flex;
flex-direction: column;
padding: 80px 28px 40px;
position: relative;
overflow: hidden;
}
/* Individual slide themes */
.slide-1 { background: linear-gradient(160deg, #0d0d1a 0%, #1a0d2e 100%); }
.slide-2 { background: linear-gradient(160deg, #0d1a15 0%, #0d1a2e 100%); }
.slide-3 { background: linear-gradient(160deg, #1a0d0d 0%, #2e1a0d 100%); }
.slide-4 { background: linear-gradient(160deg, #0d1a1a 0%, #0d2e1a 100%); }
/* Background orbs */
.slide::after {
content: '';
position: absolute;
width: 280px; height: 280px;
border-radius: 50%;
bottom: -80px; right: -80px;
opacity: 0.15;
filter: blur(60px);
pointer-events: none;
}
.slide-1::after { background: var(--accent-1); }
.slide-2::after { background: var(--accent-3); }
.slide-3::after { background: var(--accent-2); }
.slide-4::after { background: var(--accent-4); }
/* Slide content */
.slide-icon {
width: 72px; height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
margin-bottom: 32px;
flex-shrink: 0;
}
.slide-1 .slide-icon { background: rgba(108,99,255,0.2); box-shadow: 0 0 0 1px rgba(108,99,255,0.4); }
.slide-2 .slide-icon { background: rgba(67,233,123,0.15); box-shadow: 0 0 0 1px rgba(67,233,123,0.3); }
.slide-3 .slide-icon { background: rgba(255,101,132,0.15); box-shadow: 0 0 0 1px rgba(255,101,132,0.3); }
.slide-4 .slide-icon { background: rgba(255,215,0,0.15); box-shadow: 0 0 0 1px rgba(255,215,0,0.3); }
.slide-step {
font-family: 'Syne Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
color: var(--muted);
margin-bottom: 16px;
}
.slide-title {
font-size: 28px;
font-weight: 800;
line-height: 1.15;
margin-bottom: 16px;
color: var(--text);
}
.slide-1 .accent { color: var(--accent-1); }
.slide-2 .accent { color: var(--accent-3); }
.slide-3 .accent { color: var(--accent-2); }
.slide-4 .accent { color: var(--accent-4); }
.slide-body {
font-size: 14px;
line-height: 1.75;
color: var(--muted);
margin-bottom: 32px;
font-weight: 400;
}
/* Feature pills */
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
.pill {
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid rgba(255,255,255,0.1);
color: var(--muted);
}
/* Bottom controls */
.slide-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.dots {
display: flex;
gap: 6px;
justify-content: center;
}
.dot {
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.15);
transition: width 0.3s var(--slide-ease), background 0.3s;
}
.dot.active { background: white; }
.dot-1 { width: 24px; }
.dot-2, .dot-3, .dot-4 { width: 8px; }
.btn-row { display: flex; gap: 12px; }
.btn {
flex: 1;
height: 52px;
border-radius: 14px;
border: none;
font-family: 'Syne', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-ghost {
background: rgba(255,255,255,0.06);
color: var(--muted);
border: 1px solid rgba(255,255,255,0.08);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-primary {
background: white;
color: #0a0a0f;
}
.btn-primary:hover { opacity: 0.9; }
.btn-finish {
width: 100%;
height: 52px;
border-radius: 14px;
border: none;
font-family: 'Syne', sans-serif;
font-size: 15px;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-4), #ffaa00);
color: #0a0a0f;
cursor: pointer;
display: none;
}
@media (max-width: 420px) {
.phone { width: 100%; height: 100vh; border-radius: 0; }
.scene { padding: 0; }
} const track = document.getElementById('track');
const slideWidth = 340;
let current = 0;
const total = 4;
function goTo(idx) {
current = Math.max(0, Math.min(total - 1, idx));
track.style.transform = `translateX(-${current * slideWidth}px)`;
}
function next() { goTo(current + 1); }
function prev() { goTo(current - 1); }
function skip() { goTo(total - 1); }
// Touch/swipe support
let startX = 0;
track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
track.addEventListener('touchend', e => {
const dx = e.changedTouches[0].clientX - startX;
if (dx < -40) next();
if (dx > 40) prev();
});