home / skills / dylantarre / animation-principles / notifications-toasts

notifications-toasts skill

safe

/skills/07-by-ui-element/notifications-toasts

This skill applies Disney's animation principles to notifications and toasts to grab attention without disrupting users.

npx playbooks add skill dylantarre/animation-principles --skill notifications-toasts

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.7 KB

---
name: notifications-toasts
description: Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately
---

# Notification & Toast Animation Principles

Apply Disney's 12 principles to notifications for attention-grabbing yet non-disruptive alerts.

## Principles Applied to Notifications

### 1. Squash & Stretch
Toast can compress slightly on entrance impact, then stretch back. Creates a "landing" feel as if it arrived from off-screen.

### 2. Anticipation
Before auto-dismiss, toast can contract slightly (95% scale) for 100ms. Signals imminent departure to user.

### 3. Staging
Notifications should appear in consistent locations. Use color and icons to stage importance: info, success, warning, error.

### 4. Straight Ahead & Pose to Pose
Define states: entering, visible, exiting, stacked. Clear keyframes for entrance, attention (if needed), and exit.

### 5. Follow Through & Overlapping Action
Icon animates after container arrives (checkmark draws, bell wobbles). Progress bar for auto-dismiss follows toast entrance.

### 6. Ease In & Ease Out
Enter: `ease-out` (fast in, slow settle). Exit: `ease-in` (slow start, fast out). `cubic-bezier(0.68, -0.55, 0.27, 1.55)` for bounce.

### 7. Arcs
Toasts sliding from corners can follow slight arc. Bell icons should swing in arc, not rotate rigidly.

### 8. Secondary Action
While toast slides in (primary), shadow appears (secondary), icon animates (tertiary), progress bar starts (quaternary).

### 9. Timing
- Toast enter: 200-300ms
- Toast exit: 150-250ms
- Auto-dismiss delay: 3000-5000ms
- Attention pulse: 1000ms loop
- Success checkmark draw: 300ms
- Stack reorder: 200ms

### 10. Exaggeration
Error notifications can shake or pulse red. Critical alerts can be larger, bolder animations. Match urgency to importance.

### 11. Solid Drawing
Maintain consistent toast sizing. Icons should be crisp. Progress bars should be smooth (use transforms, not width).

### 12. Appeal
Smooth notifications feel polished. Jarring popups annoy users. A well-animated toast conveys professionalism.

## CSS Implementation

```css
.toast {
  animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.exiting {
  animation: toastExit 200ms ease-in forwards;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastExit {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-progress {
  transform-origin: left;
  animation: progress 4000ms linear forwards;
}
```

## Key Properties
- `transform`: translate, scale
- `opacity`: fade
- `animation`: entrance/exit sequences
- `transform-origin`: progress bars
- `box-shadow`: depth

Overview

This skill teaches how to animate notifications, toasts, alerts, snackbars, and system messages using principles adapted from Disney’s 12 animation rules. It focuses on making attention-grabbing yet non-disruptive motion that improves clarity, perceived quality, and user experience. The guidance includes timing, staging, recommended transforms, and practical CSS snippets.

How this skill works

The skill maps each animation principle to notification components: container, icon, progress bar, and shadow. It defines entrance, visible, and exit states plus optional attention pulses and stacked reordering. Concrete timing ranges, easing choices, and CSS examples show how to implement smooth, performant animations using transforms and opacity rather than layout changes.

When to use it

When displaying transient messages that need to attract attention without disrupting workflow
When differentiating priority levels (info, success, warning, error) via motion and scale
When animating stacked toasts or reorder animations to keep layout stable
When adding progress indicators for auto-dismiss behavior
When polishing UI to improve perceived responsiveness and brand appeal

Best practices

Prefer transforms (translate/scale/rotate) and opacity for smooth GPU-accelerated animation
Keep entrance ~200–300ms and exit ~150–250ms; use 3–5s auto-dismiss by default
Stage notifications consistently (corner or top-center) and use color/icons to signal importance
Use slight anticipation before auto-dismiss and a short attention pulse if re-alerting the user
Animate secondary elements sequentially (container → shadow → icon → progress) for clarity

Example use cases

Success toast: container pops in with ease-out, checkmark draws in 300ms, progress bar fills over 4s
Error alert: slightly larger, red pulse and horizontal shake to convey urgency
Info snackbar: slides in on an arc from bottom corner with subtle shadow reveal
Stacked messages: entrance animation plus 200ms reorder animation to move existing toasts
Timed dismiss: contract to 95% for 100ms as anticipation signal before auto-dismiss

FAQ

Which CSS properties should I avoid to keep animations performant?

Avoid animating layout properties like width, height, top, left. Use transform and opacity instead for GPU acceleration.

How do I match animation urgency to message importance?

Increase scale, use faster or more exaggerated motion, and add shakes or color pulses for higher urgency; keep info messages subtle.