34 lines
780 B
TypeScript
34 lines
780 B
TypeScript
import type { MotionProps } from "framer-motion";
|
|
import { useTheme } from "styled-components";
|
|
import { TRANSITIONS_IN_SECONDS } from "utils/constants";
|
|
|
|
const usePeekTransition = (): MotionProps => {
|
|
const {
|
|
sizes: { taskbar },
|
|
} = useTheme();
|
|
const peekContainerHeight =
|
|
taskbar.entry.peekImage.height + taskbar.entry.peekImage.margin * 2;
|
|
|
|
return {
|
|
animate: "active",
|
|
exit: "initial",
|
|
initial: "initial",
|
|
transition: {
|
|
duration: TRANSITIONS_IN_SECONDS.WINDOW,
|
|
ease: "easeInOut",
|
|
},
|
|
variants: {
|
|
active: {
|
|
height: peekContainerHeight,
|
|
opacity: 1,
|
|
},
|
|
initial: {
|
|
height: 0,
|
|
opacity: 0,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export default usePeekTransition;
|