Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Transitions✨ Premium

Slide Transition

Horizontal push: content A leaves to the left while B comes in from the right, both on a synchronized translateX over 0.6 s, with no layer between them; going back reverses the direction. CSS + 0.9 KB of JavaScript, click, Enter or Space, final state at once when the user reduces motion.

CSSSlideNavigation

Updated

Slide Transition — preview ▶ Live preview with a free account

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Transitions has 52 effects, including 9 free. Explore the category →

View in catalogue

3 usage examples

Next month — a co-parenting app's shared custody calendar — Slide Transition example 1

① Next month — a co-parenting app's shared custody calendar

WhenAt the end of October, Léa checks who has the children after the break and taps "November ›": October's schedule slides off screen and November's arrives with each parent's weeks.
WhyA leaves to the left, B comes from the right: the direction says time moves forward, and going back reverses the motion.
SettingsFrame enlarged to 384 × 220 px, white background; each panel holds a full month (week rows colored by parent); "‹ October" and "November ›" buttons under the calendar request state A or B; the last row of October and the first of November are the same week, which you see slide from one month to the next.
Step 2 of 4 — an online vehicle registration request — Slide Transition example 2

② Step 2 of 4 — an online vehicle registration request

WhenJulien Moreau has just bought a used car; once the plate number and VIN are entered, he moves on to step 2: his name and address replace the vehicle card.
WhyThe horizontal push shows a linear progression: the user knows they move forward one step and that going back will return them to the previous one.
SettingsEach panel is a form screen (fields already filled in); the step indicator on the right follows the frame's state (step 1 in progress, then checked when step 2 arrives); "‹ Previous" and "Next step ›" buttons.
Next cheese — a guided cheese board on a cheesemonger's tablet — Slide Transition example 3

③ Next cheese — a guided cheese board on a cheesemonger's tablet

WhenAt the counter, a customer putting together her October board swipes the tablet: the 24-month comté card leaves to the left, the farmhouse saint-nectaire card comes in from the right.
WhyLike a swipe gesture, the content pushes itself: no layer hides the photos and the aging notes during the change.
SettingsCream and stone-gray panels, cheese illustration on the left, origin, tasting notes and price on the right; pagination dots outside the frame follow the state; the whole frame is touched like a swipe.

How it works

The .sld-frame (280 × 180 px, 16 px corners, 8% white border) clips whatever sticks out (overflow: hidden). It holds two .sld-panels of the same size, with position: absolute; inset: 0: A is in place (translateX(0)), B waits just to the right, outside the frame (translateX(100%)). Both carry transition: transform .6s cubic-bezier(.4, 0, .2, 1).

When .active toggles, A moves to translateX(-100%) while B comes to translateX(0). The two contents move themselves, side by side, at the same speed: no layer covers them, nothing hides A while it leaves. Measured in Chromium 151: 250 ms after the click, A is at −172 px and B at +106 px, a 278 px gap, the frame's inner width (Firefox 153: −164 and +114); at 1.1 s, A is at −278 px and B at 0, and the state still holds three seconds later. The second click runs the reverse path: B leaves to the right, A comes back from the left. Same result in WebKit 26.5.

The script adds or removes .active on click, Enter or Space on every .sld-frame of the page, keeps aria-pressed up to date and sets aria-hidden on the panel that left. Everything is prefixed sld-, with no global name: several frames coexist on the page, each with its own state. The direction is set by the CSS; for a multi-screen flow, the FAQ shows how to pick the direction depending on going forward or back.

Accessibility

  • Reduced motion: under prefers-reduced-motion: reduce, the transition is removed and the target panel is in place with no delay (read at 60 ms, Chromium and Firefox alike: B already at 0, A at −278 px). A full-width slide is a large motion; that is what gets removed.
  • Keyboard and screen readers: the frame has role="button", tabindex="0" and aria-pressed; Enter and Space toggle like a click (measured). The panel outside the frame gets aria-hidden="true", so its text is not read. 2 px outline on keyboard focus.
  • In a real navigation, move focus to the heading of the incoming panel and announce the step ("Step 2 of 4"): the slide alone says nothing to someone who did not see the screen move.
  • Reading direction: in Arabic or Hebrew (dir="rtl"), swap the two values so "next" comes in from the left.

Browser compatibility

CSS (transform: translateX(), transition, inset) + 0.9 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26.5: push in both directions, state B held, return on the second click; keyboard and reduced motion measured in Chromium and Firefox. Only transform is animated: the browser hands it to the compositor, with no layout recalculation. inset sets the floor (Chrome 87, Firefox 66, Safari 14.1).

Chrome 87+✓ Full
Firefox 66+✓ Full
Safari 14.1+✓ Full
Edge 87+✓ Full
Mobile iOS 14.5+✓ Full
Android Chrome 87+✓ Full

Without JavaScript, panel A stays on screen. Without inset, write top: 0; right: 0; bottom: 0; left: 0 on .sld-panel.

The code

HTML structure to paste into your page (the CSS + JS come with Premium):

index.html — structure 
<div class="sld-stage">
  <div class="sld-frame" role="button" tabindex="0" aria-pressed="false">
    <div class="sld-panel sld-panel-a">…</div>
    <div class="sld-panel sld-panel-b" aria-hidden="true">…</div>
  </div>
  <span class="sld-hint">…</span>
</div>
Unlock the full code — $9.90/mo incl. tax

The full HTML + CSS + JS of Slide Transition, ready to paste — plus all 840 effects. Or $299 once, lifetime access.

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Duration and curve (CSS — transition on .sld-panel) 0.6 s, cubic-bezier(.4, 0, .2, 1) 0.35 s for a snappy carousel; cubic-bezier(.2, .8, .2, 1) gives a fast start and a braked landing, close to a finger swipe.
Axis (CSS — translateX) horizontal Replace with translateY(100%) / translateY(-100%) for a vertical push, a message thread for instance.
Gap between panels (CSS — the 100% values) the panels touch translateX(calc(100% + 16px)) for B and calc(-100% - 16px) for A leave a strip of background visible during the change, like separate cards.
Frame size (CSS — .sld-frame) 280 × 180 px width: 100%; height: 420px for a full screen: the translateX percentages follow the width, nothing else to change.
Panel colors (CSS — .sld-panel-a, -b) sky-blue and green gradients Use your screen's background; keep it opaque, otherwise the other panel shows through during the slide.

FAQ

With two panels, it already works that way: going back reverses the motion. For a series of screens, keep three positions: translateX(-100%) for past screens, 0 for the current one, 100% for screens to come. Going forward, the current screen moves left and the next comes from the right; going back, the opposite. The JavaScript only changes the position classes.
So the transition is instant on click: nothing to load or build. The off-screen panel is clipped by overflow: hidden and hidden from screen readers by aria-hidden. If a panel contains form fields, also add inert to the panel that left so the Tab key does not stop there.
It only moves transform, which the browser animates off the main thread: no layout recalculation on each frame. Avoid animating left or margin-left instead, which recalculate the page, and keep shadows light inside the panels.