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

Fade & Slide Up

A hand-over on a vertical axis: A moves up 40 px while fading out as B comes in from 40 px below while fading in, on the same 0.6 s transition — the motion says "next". CSS + 0.9 KB of JavaScript, click, Enter or Space, a simple fade in place when the user reduces motion.

CSSFadeSlide

Updated

Fade & Slide Up — 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

Ticket called to the desk — a prefecture waiting-room screen — Fade & Slide Up example 1

① Ticket called to the desk — a prefecture waiting-room screen

WhenThe officer at desk 5 calls the next ticket: the screen replaces "B041 → desk 3" with "B042 → desk 5", and the old number joins the history.
WhyThe old number moves up and fades while the new one comes in from below: people understand "next" even from the back of the room.
Settings384 × 220 px frame styled as a display screen (night background, blue rim), 64 px yellow number; below the frame, the history of last calls shifts when the new number arrives; time and estimated wait on the right.
Next speaker — the control-room screen of a local TEDx conference — Fade & Slide Up example 2

② Next speaker — the control-room screen of a local TEDx conference

WhenIn the control room, 30 seconds before the change-over, the technician moves on to the next speaker: the card of Nadia Ferhat, who is wrapping up, fades upward and Thomas Lenoir's rises into its place.
WhyThe vertical axis conveys a program moving forward, and the fade keeps two faces from overlapping.
SettingsRow-layout panels (96 px round portrait on the left, name, topic and duration on the right), "Wrapping up" label in gray then "Up next" in red; the run of show below the frame highlights the current slot.
Next stop — a tram's onboard screen — Fade & Slide Up example 3

③ Next stop — a tram's onboard screen

WhenThe doors close at Station and the T1 pulls out toward Exhibition Park: in front of the standing passengers, "Stop: Station" fades out and "Next stop: City Hall" rises into its place.
WhyThe past stop's name moves up and fades, the next one comes from below: a standing passenger sees at a glance that the line is moving on.
SettingsDark green line background, 38 px stop name; line map below the frame whose current dot moves from "Station" to "City Hall" and whose grayed traveled part gets longer.

How it works

The .fadeup-container frame (280 × 180 px, 16 px corners, #111118 background, overflow: hidden) stacks two .fadeup-panels with position: absolute; inset: 0, content centered in a column. A is visible and in place; B is transparent and 40 px lower (opacity: 0; transform: translateY(40px)). Both carry transition: .6s cubic-bezier(.4, 0, .2, 1), which animates both opacity and position.

When .active toggles, A goes to opacity: 0; translateY(-40px) and B to opacity: 1; translateY(0): both contents move the same way, upward, one leaving, one arriving. Measured in Chromium 151: 250 ms after the click, A is at 0.38 opacity and −24.8 px, B at 0.62 and +15.2 px (Firefox 153: 0.41 / −23.6 px and 0.59 / +16.4 px); at 1.1 s, A at 0 and −40 px, B at 1 and 0, then nothing moves any more (read 3 s later). The second click goes back down: B leaves downward, A comes back from above. Same result in WebKit 26.5.

The travel is short (40 px) and paired with a fade: the two texts never overlap at full opacity, so two names or two numbers never read on top of each other. Each .fadeup-container on the page keeps its own state, toggled by mouse or keyboard; aria-pressed and aria-hidden follow, with no global name.

Accessibility

  • Reduced motion: under prefers-reduced-motion: reduce, both panels stay in place (transform: none) and only a 0.15 s fade remains (measured in Chromium and Firefox: no translation, change complete within 260 ms).
  • Keyboard and screen readers: works like Slide Transition (fx-0696), a button frame usable from the keyboard, hidden panel never read.
  • Public displays: for a call screen (counter, platform), also announce the change with sound or an aria-live="polite" region; the visual hand-over alone is not enough for a visually impaired person.
  • Readability: mid-change, each text is at about 50% and offset by 20 px; do not trigger the hand-over more often than every 3 seconds on text people must read.

Browser compatibility

CSS (opacity, transform: translateY(), transition, inset) + 0.9 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26.5: upward hand-over, state B held, return on the second click; keyboard and reduced motion measured in Chromium and Firefox. Opacity and transform are animated by 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 .fadeup-panel.

The code

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

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

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

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Distance (CSS — translateY(40px) and translateY(-40px)) 40 px 20 px for a subtle hand-over inside a card, 60 to 80 px for a large screen. Beyond half the frame height, texts leave before they finish fading.
Direction (CSS — signs of both translateY) upward Flip the signs for a downward hand-over (going back to the previous item); keep the same direction for A and B, that is what gives the feeling of a queue.
Duration and curve (CSS — transition on .fadeup-panel) 0.6 s, cubic-bezier(.4, 0, .2, 1) 0.4 s for a counter or a stock ticker; delay B by 0.1 s (transition-delay on .fadeup-container.active .fadeup-panel-b) so A is almost gone when B enters.
Content (HTML — .fadeup-panel-a, -b) avatar, name, role Any centered content works: number, stop name, quote. Keep panels the same height so the motion stays even.
Frame (CSS — .fadeup-container) 280 × 180 px, #111118 background The frame background is what shows during the change: use your screen's color, opaque.

FAQ

Without a fade, A and B would both be opaque during the change and, offset by only a few pixels, their texts would read over each other. The fade makes one of them dominate at every moment: A while it is near its place, B as soon as it nears its own. The short motion gives the direction, the fade keeps reading clean.
With two alternating panels, the second click goes back down: it is a round trip. For a queue that always moves up (tickets, stops), your script can handle three positions with classes: is-in (in place, opaque), is-out (40 px higher, transparent) and is-next (40 px lower, transparent). On each call, it would move the displayed item to is-out, the next one to is-in, then put the old one back to is-next with no transition, ready to be reused with the next text.
No: the panels are absolutely positioned in a fixed-size frame, and the transform does not change layout. The frame clips whatever sticks out during the 40 px travel.