feat(site): add bouncy pop animation to inbox notification badge#26057
Open
jakehwll wants to merge 6 commits into
Open
feat(site): add bouncy pop animation to inbox notification badge#26057jakehwll wants to merge 6 commits into
jakehwll wants to merge 6 commits into
Conversation
Replace the basic fade-in/zoom-in animation on the inbox unread badge with the transitions.dev notification-badge pattern. The wrapper slides diagonally into position while the inner dot pops with an overshoot bounce easing and blurs out on exit. All animation is driven through Tailwind: keyframe and animation registered in tailwind.config.js, timing variables in index.css :root, and group-data-* variants on the component. No raw CSS classes. Pure CSS, no JS orchestration. The global prefers-reduced-motion guard already covers these elements.
…all values Drop the custom keyframe from tailwind.config.js and use the existing animate-in + slide-in-from-* utilities from tailwindcss-animate. Remove all --badge-* CSS variables from index.css and inline the durations and easings directly in the component. Drop the transitions.dev comment.
The CSS custom property was defined on the child UnreadBadge span but read by the parent wrapper for positioning. Custom properties cascade down, not up, so the offset resolved to zero.
…otifications The badge DOM is now only mounted once unreadCount has been > 0 at least once. This avoids the dot visibly shrinking to scale-0 on first render when there are no notifications. Once mounted it stays in the tree so subsequent open/close transitions play normally.
The diagonal slide covers too much distance on a small badge and looks like it flies in from the center of the button. The overshoot scale + fade on the dot alone is enough.
Without the slide-in or exit animation there is no reason to keep the badge permanently mounted. Drop the useRef, the wrapper span, the group-data variants, and use animate-in zoom-in-0 fade-in-0 with the bouncy overshoot easing directly on the UnreadBadge.
DanielleMaywood
approved these changes
Jun 4, 2026
jeremyruppel
approved these changes
Jun 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces the basic
animate-in fade-in zoom-in duration-200on the inbox unread badge with a bouncier pop using an overshoot easing.The badge now pops in from
scale(0)withcubic-bezier(0.34, 1.36, 0.64, 1)over 500ms, giving it an elastic overshoot that makes it feel alive. Usestailwindcss-animateutilities (animate-in zoom-in-0 fade-in-0) with just one arbitrary property for the easing. Conditional rendering is preserved as before.Also adds a
BadgeTransitionstory with toggle buttons for easy visual verification.