Skip to content

feat: add smooth easing animations for tooltips #203

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

Draft
nazcadon wants to merge 3 commits into
base: animation
Choose a base branch
from
Draft

feat: add smooth easing animations for tooltips #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d971dc
feat: add smooth easing animations for tooltips
nazcadon Mar 26, 2026
b11a6c5
fix: tooltipアニメーションをより滑らかに改善
nazcadon Apr 2, 2026
956b864
Merge branch 'animation' into fix/tooltip-motion
touyou Apr 8, 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
9 changes: 9 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,12 @@
@utility accordion-up {
animation: accordion-up 0.2s ease-out;
}

/* Tooltip用の滑らかなイージング */
/* en: Smooth easing for tooltip animations */
@utility tooltip-ease-in {
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@utility tooltip-ease-out {
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
Comment on lines +136 to +143

@touyou touyou Mar 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

元々のアニメーションユーティリティ含めて揃ったらsparkle-design.cssから吐き出せるようにしとかないとかもな

8 changes: 4 additions & 4 deletions src/components/ui/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,10 @@ function TooltipContent({
side={side}
sideOffset={sideOffset}
className={cn(
"bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95",
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-90 duration-250 tooltip-ease-in",
"data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1",
"data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-90 data-[state=closed]:duration-[120ms] data-[state=closed]:tooltip-ease-out",
"z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice",
"px-2 py-1 character-2-regular-pro text-white",
className
Expand Down
Loading