Skip to content

refactor(ui): improved toast and notification animations using motion #2453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bajrangCoder merged 2 commits into from
Jul 5, 2026
Merged

refactor(ui): improved toast and notification animations using motion #2453

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
358f8f0
refactor(ui): improved toast and notification animations using Motion
bajrangCoder Jul 5, 2026
bfa7aef
fix
bajrangCoder Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/components/toast/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import "./style.scss";
import { animate } from "motion";

/**@type {Array<HTMLElement>} */
const toastQueue = [];
Expand Down Expand Up @@ -33,17 +34,29 @@ export default function toast(message, duration = 0, bgColor, color) {
Object.defineProperties($toast, {
hide: {
value() {
this.classList.add("hide");
setTimeout(() => {
animate(
this,
{ opacity: 0, transform: "translateY(15px) scale(0.95)" },
{ duration: 0.25, ease: "easeIn" },
).then(() => {
this.remove();
const $toast = toastQueue.splice(0, 1)[0];
if ($toast) $toast.show();
}, 500);
});
},
},
show: {
value() {
app.append(this);
this.style.opacity = "0";
this.style.transform = "translateY(20px) scale(0.95)";
this.style.willChange = "transform, opacity";
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated

animate(
this,
{ opacity: 1, transform: "translateY(0) scale(1)" },
{ type: "spring", stiffness: 300, damping: 25 },
);

if (typeof duration === "number") {
setTimeout(() => {
Expand Down
7 changes: 1 addition & 6 deletions src/components/toast/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,10 @@
max-width: 80vw;
width: fit-content;
overflow: auto;
animation: slow-appear 500ms linear 1;
z-index: 9999;
border-radius: 4px;
pointer-events: none;

&.hide {
transition: all 1s linear;
opacity: 0;
}
will-change: transform, opacity;

&[clickable='true'] {
pointer-events: all;
Expand Down
28 changes: 23 additions & 5 deletions src/lib/notificationManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import sidebarApps from "sidebarApps";
import DOMPurify from "dompurify";
import Ref from "html-tag-js/ref";
import { animate } from "motion";

/**
* Notification create param
Expand Down Expand Up @@ -242,8 +243,13 @@ class NotificationManager {
`#${notification.id}`,
);
if (!notificationElement) return;
notificationElement.classList.add("hiding");
setTimeout(() => notificationElement.remove(), 300);
animate(
notificationElement,
{ opacity: 0, transform: "translateX(100%)" },
{ duration: 0.25, ease: "easeIn" },
).then(() => {
notificationElement.remove();
});
}

#clearNotification(id) {
Expand Down Expand Up @@ -289,9 +295,21 @@ class NotificationManager {
this.renderNotifications();

// show toast notification
document
.querySelector(".notification-item-container")
?.appendChild(this.createToastNotification(notification));
const $toastEl = this.createToastNotification(notification);
const $container = document.querySelector(".notification-item-container");
if ($container) {
$container.appendChild($toastEl);

$toastEl.style.opacity = "0";
$toastEl.style.transform = "translateX(100%)";
$toastEl.style.willChange = "transform, opacity";

@greptile-apps greptile-apps Bot Jul 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 will-change never reset after animation completes

$toastEl.style.willChange = "transform, opacity" is set before the show animation but never cleared afterwards. The browser retains a dedicated compositor layer for that element for the full 5-second toast lifetime even though the layer is only needed during the ~300 ms spring animation. Resetting to "auto" in the animate callback would release the compositor resource promptly. The same issue is present in toast/index.js, though there the element is removed shortly after so the impact is smaller.


animate(
$toastEl,
{ opacity: 1, transform: "translateX(0)" },
{ type: "spring", stiffness: 300, damping: 26 },
);
}
}

#parseIcon(icon) {
Expand Down
2 changes: 1 addition & 1 deletion src/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,10 +738,10 @@ input[type="search"]::-webkit-search-results-decoration {
max-width: min(400px, calc(100vw - 40px));
gap: 12px;
box-shadow: 0 4px 12px var(--box-shadow-color);
animation: toastSlideIn 0.3s ease-out;
border: 1px solid var(--border-color);
white-space: wrap;
box-sizing: border-box;
will-change: transform, opacity;
}

>* {
Expand Down
7 changes: 2 additions & 5 deletions src/styles/notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
align-items: flex-start;
animation: slideIn 0.3s ease-out;
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
border: 1px solid var(--popup-border-color);
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;

&.loading {
Expand Down Expand Up @@ -120,10 +120,7 @@
}
}

&.hiding {
transform: translateX(120%);
opacity: 0;
}


&.success {
.notification-icon {
Expand Down