---
title: 'Entrances & Overlays'
excerpt: 'Toast enter/exit, bottom sheet dismiss — symmetric paths and ease-out.'
icon: 'Sparkles'
---

## Surfaces that appear and leave

Overlays (toasts, sheets, modals) need a clear **enter** and a matching **exit**. Enter with `ease-out` so motion starts immediately; exit slightly faster with `ease-in` so dismiss feels snappy. The travel path should be **symmetric** — leave the same edge you arrived from.

## Toast enter + exit

Toast rises from below on enter (`from` + `power2.out`). Dismiss sends it back down the same `y` with `power2.in` and a slightly shorter duration so closing feels decisive.

Replay: watch enter settle, then hit × and see the exit mirror the entrance.

<ComponentPreview replay>
  <GsapToastExit />

  <DocsFileTabs title="Toast exit">

```tsx title="toast-exit.tsx"
// enter
gsap.from('.toast', { y: 24, autoAlpha: 0, duration: 0.35, ease: 'power2.out' });
// exit
gsap.to('.toast', { y: 24, autoAlpha: 0, duration: 0.3, ease: 'power2.in' });
```

```html title="toast-exit-markup.html"
<div class="flex items-start gap-2">
  <div class="gsap-toast rounded-lg border bg-card px-4 py-3">
    Changes saved
  </div>
  <button>×</button>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Bottom sheet

Sheets use `yPercent: 100` (off-screen below) as both start and end. Enter animates to `0`; dismiss returns to `100` and calls `close` in `onComplete` so React unmounts only after the motion finishes.

Open and dismiss: the sheet always slides from / to the bottom edge — never fades out in place.

<ComponentPreview>
  <GsapSheetDismiss />

  <DocsFileTabs title="Sheet dismiss">

```tsx title="sheet-dismiss.tsx"
gsap.from('.sheet', { yPercent: 100, duration: 0.4, ease: 'power2.out' });
gsap.to('.sheet', { yPercent: 100, duration: 0.35, ease: 'power2.in', onComplete: close });
```

```html title="sheet-dismiss-markup.html"
<div class="relative h-full">
  <div class="absolute inset-0 bg-black/30"></div>
  <div class="gsap-sheet absolute bottom-0 left-0 right-0 rounded-t-xl border bg-card p-4">
    <p>Share link</p>
    <p>Copy or send to your team.</p>
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

Dismissable surfaces should **exit the same edge** they entered — spatial consistency.