Skip to content

Commit

Permalink
animation tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@xmliszt
xmliszt committed Oct 27, 2024
1 parent 54e5e9d commit 9bfe623
Show file tree
Hide file tree
Showing 15 changed files with 56 additions and 116 deletions.
68 changes: 34 additions & 34 deletions .velite/pages.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
"source.fixAll.eslint": "always"
},
}
2 changes: 1 addition & 1 deletion app/[slug]/shadow-subtitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function ShadowSubtitle(props: ShadowSubtitleProps) {
isMobile || isTablet
? 'skew-x-[30deg] scale-y-100 opacity-75'
: 'skew-x-0 scale-y-0 opacity-0',
'transition-[opacity_transform] duration-300 ease-out group-hover:skew-x-[30deg] group-hover:scale-y-100 group-hover:opacity-75'
'transition-[opacity_transform] ease-in-out group-hover:skew-x-[30deg] group-hover:scale-y-100 group-hover:opacity-75'
)}
>
{props.children}
Expand Down
12 changes: 6 additions & 6 deletions components/custom/bgm-player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@ export function BGMPlayer(props: BGMPlayerProps) {
if (!isLoading) toggleBGM();
}}
className={cn(
'transition-transform duration-300 ease-out hover:rotate-[360deg] hover:scale-125',
'transition-transform ease-in-out',
isLoading
? 'animate-pulse cursor-progress duration-1000'
: 'cursor-pointer duration-300'
: 'cursor-pointer duration-300 hover:rotate-[360deg] hover:scale-125'
)}
>
<Disc
Expand Down Expand Up @@ -140,7 +140,7 @@ function BGMController({
<Tooltip>
<TooltipTrigger asChild>
<button
className='text-muted-foreground transition-[transform_color] ease-out hover:scale-105 hover:text-primary'
className='text-muted-foreground transition-[transform_color] hover:scale-105 hover:text-primary'
onClick={() => prevBGM()}
>
<CaretUp />
Expand All @@ -151,7 +151,7 @@ function BGMController({
<Tooltip>
<TooltipTrigger asChild>
<button
className='text-muted-foreground transition-[transform_color] ease-out hover:scale-105 hover:text-primary'
className='text-muted-foreground transition-[transform_color] hover:scale-105 hover:text-primary'
onClick={() => nextBGM()}
>
<CaretDown />
Expand All @@ -170,7 +170,7 @@ function BGMController({
<Tooltip>
<TooltipTrigger asChild>
<button
className='text-muted-foreground transition-[transform_color] ease-out hover:scale-105 hover:text-primary'
className='text-muted-foreground transition-[transform_color] hover:scale-105 hover:text-primary'
onClick={() => prevBGM()}
>
<SkipBack size={20} />
Expand All @@ -181,7 +181,7 @@ function BGMController({
<Tooltip>
<TooltipTrigger asChild>
<button
className='text-muted-foreground transition-[transform_color] ease-out hover:scale-105 hover:text-primary'
className='text-muted-foreground transition-[transform_color] hover:scale-105 hover:text-primary'
onClick={() => nextBGM()}
>
<SkipForward size={20} />
Expand Down
9 changes: 2 additions & 7 deletions components/custom/floating-navigation-bar/floating-navigation-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,7 @@ export function FloatingNavigationBar(props: FloatingNavigationBarProps) {
)}
>
<div className='group size-10'>
<div
className={cn(
'absolute z-20 flex h-full w-full items-center justify-center',
'transition-transform duration-300 ease-in-out group-hover:rotate-[360deg] group-hover:scale-90'
)}
>
<div className='absolute z-20 flex h-full w-full items-center justify-center'>
{isPlaying ? (
<Disc
size={24}
Expand All @@ -57,7 +52,7 @@ export function FloatingNavigationBar(props: FloatingNavigationBarProps) {
<div
className={cn(
'z-10 h-full w-full rounded-full border p-2 text-secondary-foreground shadow-sm backdrop-blur-lg',
'transition-[transform_background_box-shadow] duration-300 ease-in-out group-hover:scale-105 group-hover:bg-background group-hover:shadow-lg'
'transition-[transform_background_box-shadow] duration-300 group-hover:scale-105 group-hover:bg-background group-hover:shadow-lg'
)}
></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/custom/navigation-bar/navigation-bar-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function NavigationBarItem(props: NavigationBarItemProps) {
<Link
href={props.href}
className={cn(
'rounded-lg px-3 py-1.5 text-sm transition-colors ease-out hover:bg-secondary',
'rounded-lg px-3 py-1.5 text-sm transition-colors hover:bg-secondary',
isCurrentPath ? 'bg-secondary font-semibold' : 'font-normal'
)}
onClick={() => {
Expand Down
4 changes: 2 additions & 2 deletions components/custom/piano/piano.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ export function Piano() {
<button
onClick={decreaseOctave}
disabled={isFirstOctave}
className='transition-transform ease-out hover:scale-105 disabled:cursor-not-allowed disabled:opacity-50'
className='transition-transform hover:scale-105 disabled:cursor-not-allowed disabled:opacity-50'
>
<Minus size={20} />
</button>
<button
onClick={increaseOctave}
disabled={isLastOctave}
className='transition-transform ease-out hover:scale-105 disabled:cursor-not-allowed disabled:opacity-50'
className='transition-transform hover:scale-105 disabled:cursor-not-allowed disabled:opacity-50'
>
<Plus size={20} />
</button>
Expand Down
9 changes: 2 additions & 7 deletions components/custom/toc/floating-toc-drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function FloatingTOCDrawer(props: FloatingTOCDrawerProps) {
key={heading.url}
href={`#${slugify(heading.title)}`}
className={cn(
'rounded-lg p-2 text-left text-xs text-secondary-foreground transition-colors ease-out',
'rounded-lg p-2 text-left text-xs text-secondary-foreground transition-colors',
'hover:bg-secondary',
isAtCurrentTOC(hash, heading.title)
? 'bg-secondary font-semibold'
Expand Down Expand Up @@ -78,12 +78,7 @@ export function FloatingTOCDrawer(props: FloatingTOCDrawerProps) {
)}
>
<div className='group size-10'>
<div
className={cn(
'absolute z-20 flex h-full w-full items-center justify-center',
'transition-transform duration-300 ease-in-out group-hover:rotate-[360deg] group-hover:scale-90'
)}
>
<div className='absolute z-20 flex h-full w-full items-center justify-center'>
<ArticleNyTimes size={24} />
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion components/custom/toc/toc-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function TOCTree() {
<span
className={cn(
'absolute bottom-0 left-0 rounded-full bg-foreground',
'h-0 w-0 opacity-0 transition-[opacity_width] duration-300 ease-in-out group-hover:h-[1px] group-hover:w-full group-hover:opacity-100'
'h-0 w-0 opacity-0 transition-[opacity_width] duration-300 group-hover:h-[1px] group-hover:w-full group-hover:opacity-100'
)}
></span>
</div>
Expand Down
48 changes: 0 additions & 48 deletions components/custom/waving-avatar.tsx
View file

This file was deleted.

2 changes: 0 additions & 2 deletions components/mdx-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Link from 'next/link';

import { slugify } from '@/lib/utils';

import { WavingAvatar } from './custom/waving-avatar';
import { AspectRatio } from './ui/aspect-ratio';
import { BackToTopLink } from './ui/back-to-top-link';
import { BadgeGroup } from './ui/badge-group';
Expand Down Expand Up @@ -105,7 +104,6 @@ export function MDXContent({ code, components }: MdxProps) {
pre: (props: any) => (
<CopyablePre {...props}>{props.children}</CopyablePre>
),
WavingAvatar,
BadgeGroup,
PhotoBentoGrid,
ExternalActionButtonLink,
Expand Down
2 changes: 1 addition & 1 deletion components/ui/badge-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function BadgeGroup({ tags }: BadgeGroupProps) {
{tags.map((tag) => (
<Badge
key={tag}
className='rounded-full border-border px-1.5 py-0.5 text-[10px] font-normal transition-transform ease-out hover:scale-105'
className='rounded-full border-border px-1.5 py-0.5 text-[10px] font-normal transition-transform hover:scale-105'
variant='secondary'
>
{tag}
Expand Down
2 changes: 1 addition & 1 deletion components/ui/custom-badge-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function CustomBadgeLink(props: CustomBadgeLinkProps) {
return (
<Link href={props.href}>
<Badge
className='rounded-full border-border text-xs font-normal transition-transform ease-out hover:scale-105'
className='rounded-full border-border text-xs font-normal transition-transform hover:scale-105'
variant='secondary'
>
{props.children}
Expand Down
2 changes: 1 addition & 1 deletion components/ui/custom-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function CustomLink({
<span
className={cn(
'absolute bottom-0 left-0 rounded-full bg-foreground',
'h-0 w-0 opacity-0 transition-[opacity_width] duration-300 ease-in-out group-hover:h-[1px] group-hover:w-full group-hover:opacity-100'
'h-0 w-0 opacity-0 transition-[opacity_width] duration-300 group-hover:h-[1px] group-hover:w-full group-hover:opacity-100'
)}
></span>
</object>
Expand Down
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 9bfe623

Please sign in to comment.