Exit the way you entered

Toasts and sheets leave the way they came, offset in percent.

From find-animation-opportunities and improve-animations.

Toasts leave where they came

Press Send, then watch each toast leave.

Exits upwardBad
in translateY(100%)out translateY(-100%)
Exits where it came inGood
in and out translateY(100%)
.toast {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.toast[data-open] { transform: none; opacity: 1; transition-duration: 260ms; }

100% beats a pixel guess

Open the sheets, then change rows or the offset.

translateY(200px)Bad

Pending approvals

    translateY(100%)Good

    Pending approvals 

      .sheet { transition: transform 300ms var(--ease-drawer); }
.sheet[data-closed] { transform: translateY(100%); transition-duration: 240ms; }

      Reveal with clip-path

      Press Reveal or scrub, then add lines to the note.

      Slide from -60pxBad
      INV-1042Notes

      clip-path: inset()Good
      INV-1042Notes

      .panel {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 250ms var(--ease-out);
}
.panel[data-open] { clip-path: inset(0 0 0 0); }

      Why it matters, pros and cons

      Why it matters

      A matching exit shows where the surface lives; percentages fit any content.

      Pros

      • One hidden pose serves enter and exit.
      • Fits content at any height.
      • Interrupting reverses to the same edge.

      Cons

      • A swipe wins: follow the finger's direction.
      • Centered modals have no edge; fade and scale.
      • clip-path keeps layout space; animate rows if needed.