Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: add text animation

Browse Source
This commit is contained in:
MAZE 2023-10-30 19:38:40 +03:30
parent 5fecd383aa
commit 7810d21225
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/tooltip/tooltip.tsx
View File

@ -14,11 +14,13 @@ import {
} from '@floating-ui/react'; } from '@floating-ui/react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { slideX, slideY, mix, fade } from '@/lib/motion';
import styles from './tooltip.module.css'; import styles from './tooltip.module.css';
interface TooltipProps { interface TooltipProps {
children: JSX.Element; children: JSX.Element;
content: React.ReactNode; content: string;
hideDelay?: number; hideDelay?: number;
placement?: Placement; placement?: Placement;
showDelay?: number; showDelay?: number;
@ -62,21 +64,19 @@ export function Tooltip({
role, role,
]); ]);
const translate = { const slide = {
bottom: { translateY: -5 }, bottom: slideY(-5),
left: { translateX: 5 }, left: slideX(5),
right: { translateX: -5 }, right: slideX(-5),
top: { translateY: 5 }, top: slideY(5),
}[ }[
computedPlacement.includes('-') computedPlacement.includes('-')
? computedPlacement.split('-')[0] ? computedPlacement.split('-')[0]
: computedPlacement : computedPlacement
]; ];
const variants = { const variants = mix(fade(), slide!);
hidden: { opacity: 0, ...translate }, const textVariants = fade();
show: { opacity: 1, translateX: 0, translateY: 0 },
};
return ( return (
<> <>
@ -98,7 +98,18 @@ export function Tooltip({
initial="hidden" initial="hidden"
variants={variants} variants={variants}
> >
{content} <AnimatePresence initial={false} mode="wait">
<motion.span
animate="show"
exit="hidden"
initial="hidden"
key={content}
transition={{ duration: 0.15 }}
variants={textVariants}
>
{content}
</motion.span>
</AnimatePresence>
</motion.div> </motion.div>
</div> </div>
)} )}