filamentphp/filament: Fix: Notification vertical animation

Category: Fix (3) · PR #20136 · Fixes #7395

Filament's toast notifications have carried a subtle but long-running visual bug: while the fade and horizontal slide of their enter/leave animation worked, the vertical component did not. PR #20136 — "fix: Notification vertical animation" — corrects this so notifications glide in and out along the vertical axis, and the rest of the stack reflows smoothly when a toast is dismissed. The change is stylesheet-level: there are no changes to PHP APIs, JavaScript behaviour, configuration, or the database, so upgrading from v4.15.1 is a drop-in affair.

What was wrong

Filament animates notifications with CSS transitions that blend opacity with horizontal and vertical movement. In the shipped styles, the vertical offset applied to the notification wasn't covered by the transition, so that portion of the movement jumped from start to finish in a single frame instead of interpolating.

In practice this showed up in two ways: a toast that should slide vertically into place appeared to pop in at its final position, and dismissing a toast caused the notifications stacked beneath it to snap upward (or downward) to fill the freed slot. The glitch was easiest to spot with several notifications on screen at once, or with rapid-fire notifications from a bulk action or queue job.

What changed in #20136

The notification styles now animate vertical movement correctly — for entering, for leaving, and for the stack reflowing as neighbours move. Motion is applied in the same transition as opacity and horizontal movement, so the whole animation reads as one coherent gesture instead of a fade plus a teleport.

Be aware that the diff is dominated by minified build output. The truncated diff shows rebuilt dist/index.css files (for example, the forms package's bundled vendor styles for CodeMirror, EasyMDE, FilePond, cropper and noUiSlider, with minified rules reordered by the build tool). Those are artifacts of rebuilding the compiled assets across packages; the meaningful functional change lives in the notifications package's stylesheet.

Why it matters

Notifications are one of the highest-frequency moments in any Filament app — save confirmations, validation summaries, realtime events pushed to the browser. Animation there isn't just decoration: it tells the eye where a toast came from, communicates the stack ordering, and makes the panel feel stable while content moves. A broken vertical axis is the kind of polish defect users notice subconsciously, especially in data-heavy workflows where notifications appear in quick succession. This fix restores that polish without adding a single new API surface to learn or maintain.

Upgrading from v4.15.1

There is almost nothing to do:

• Run composer update filament/filament (or the specific packages you depend on) and pick up the next patch release containing #20136.
• If you copy Filament's built assets into public/, re-run php artisan filament:assets so the corrected CSS is served; CDN and browser caches may need a nudge.
• If you have published the notification views or overridden the notification CSS in a custom theme, re-check that your overrides still compose with the corrected transition rules.
• Nothing else changes: no config keys, no migrations, and no behavioural differences in how you send notifications.

Seeing the fix in action

The fix is easiest to appreciate with two notifications on screen at once:

use Filament\Notifications\Notification;

public function importFinished(int $imported, int $skipped): void
{
    Notification::make()
        ->title("Imported {$imported} rows")
        ->success()
        ->send();

    if ($skipped > 0) {
        Notification::make()
            ->title("{$skipped} rows were skipped")
            ->warning()
            ->send();
    }
}

Dismiss the first toast while both are visible. Before this fix, the remaining toast snapped vertically into the freed slot; with #20136 it glides into place, matching the fade-out of the toast it replaces.

If you build a custom theme and want to tune or disable the motion yourself, you can target the notification element directly, for example to respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
    .fi-notification {
        transition: none;
    }
}

Takeaways

• PR #20136 fixes the vertical part of the notification enter/leave animation, closing long-standing issue #7395.
• The change is CSS-only in the notifications package, plus rebuilt dist assets; the bulk of the diff is minified build output.
• Upgrading from v4.15.1 requires no code changes — just re-publish or bust caches for Filament's compiled CSS if you vendor those assets.
• If you've customized notification views or CSS, retest the toast animation after updating.

Sources

• Pull request #20136
• Release v5.10.1