Description
I propose adding a lightweight, animated Toast Notification component (often called Snackbars). This component will allow developers to easily display non-intrusive, auto-disappearing messages at the corners or bottom of the screen.
The implementation will rely on EaseMotion CSS for the entry/exit animations (e.g., sliding up from the bottom or sliding in from the right) and will include a tiny Vanilla JS utility function (easeToast.show()) to dynamically append and remove the toasts from the DOM.
While not explicitly on the v1.3 roadmap, Toast notifications are universally required in modern web apps and align perfectly with EaseMotion's "animation-first" philosophy.
Why is this useful for EaseMotion CSS?
Handling feedback (success messages, error alerts) is a core requirement of any UI shell. Building a Toast system from scratch that handles multiple stacking notifications, proper z-indexing, and smooth CSS exit animations is notoriously difficult. By providing a built-in Toast utility, EaseMotion CSS becomes an even more complete toolkit for building production-ready applications.
HTML Snippet
html
✓
Success
Your changes have been saved.
×
Show Toast
CSS Snippet
css
/* Container positioning */
.ease-toast-container {
position: fixed;
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--ease-space-3);
pointer-events: none; /* Let clicks pass through empty space */
}
.ease-toast-bottom-right {
bottom: var(--ease-space-6);
right: var(--ease-space-6);
}
/* The Toast Box */
.ease-toast {
pointer-events: auto;
min-width: 300px;
max-width: 400px;
background-color: var(--ease-color-surface);
border-radius: var(--ease-radius-md);
box-shadow: var(--ease-shadow-lg);
padding: var(--ease-space-4);
display: flex;
align-items: flex-start;
gap: var(--ease-space-3);
position: relative;
overflow: hidden;
border-left: 4px solid var(--ease-color-primary);
}
.ease-toast-success { border-left-color: var(--ease-color-success); }
.ease-toast-danger { border-left-color: var(--ease-color-danger); }
/* Progress bar animation */
.ease-toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: rgba(0,0,0,0.1);
width: 100%;
animation: ease-toast-shrink linear forwards;
}
@Keyframes ease-toast-shrink {
from { width: 100%; }
to { width: 0%; }
}
/* Exit animation class */
.ease-toast-exit {
animation: easeFadeOut var(--ease-speed-fast) var(--ease-ease-in) forwards !important;
}
@Keyframes easeFadeOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a lightweight, animated Toast Notification component (often called Snackbars). This component will allow developers to easily display non-intrusive, auto-disappearing messages at the corners or bottom of the screen.
The implementation will rely on EaseMotion CSS for the entry/exit animations (e.g., sliding up from the bottom or sliding in from the right) and will include a tiny Vanilla JS utility function (easeToast.show()) to dynamically append and remove the toasts from the DOM.
While not explicitly on the v1.3 roadmap, Toast notifications are universally required in modern web apps and align perfectly with EaseMotion's "animation-first" philosophy.
Why is this useful for EaseMotion CSS?
Handling feedback (success messages, error alerts) is a core requirement of any UI shell. Building a Toast system from scratch that handles multiple stacking notifications, proper z-indexing, and smooth CSS exit animations is notoriously difficult. By providing a built-in Toast utility, EaseMotion CSS becomes an even more complete toolkit for building production-ready applications.
HTML Snippet
html
Success
Your changes have been saved.
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.