← Back to gallery
CSS

Toast Notification Slide Stack

Translate-Y driven toast stack in top-right and bottom-center anchors, with flex gap handling restack and prefers-reduced-motion collapsing the transform to an instant swap.

Duration
2s
Resolution
1440×900
Format
CSS
toastnotificationslide-instacktranslateYreduced-motion

Feedback / toast / vertical stack

Toast notification slide stack

Reimplements the translateY-based toast primitive in two anchor orientations, with flex gap driving the restack and prefers-reduced-motion collapsing the transform to an instant swap.

top-right slide-in — 24px slide · 320ms

Corner stack · new toast pushes down

Top-right slide-in

New notices enter from above the first slot with a short translateY offset and settle into a stacked column pinned to the top-right.

  • top-right
  • translateY
  • auto-dismiss

Center stack · new toast lifts from below

Bottom-center upstack

New notices slide up from below the row. Older notices ride on flex gap so the stack reads as a soft upstream push rather than an absolute reshuffle.

  • bottom-center
  • upward-stack
  • flex-gap

Toast inspector

Top-right slide-in

Slide distance
24px
Enter duration
320ms

Stack order follows DOM order from top. Dismissals only animate the removed toast; siblings reflow through flex gap without a manual FLIP.

Live controls

css
.toast-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-end;
}

.toast-stack__item {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
}

.toast-stack__item[data-state='enter'] {
  transform: translateY(-24px);
  opacity: 0;
}

.toast-stack__item[data-state='exit'] {
  transform: translateY(-24px);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .toast-stack__item {
    transition-duration: 0ms;
    transform: none !important;
  }
}