71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import type { Transition, Variants } from "framer-motion";
|
|
|
|
export const viewportOnce = { once: true };
|
|
|
|
export const pageTitleVariants: Variants = {
|
|
initial: { opacity: 0, y: -50 },
|
|
animate: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
export const slideFromLeftVariants: Variants = {
|
|
initial: { opacity: 0, x: -50 },
|
|
animate: { opacity: 1, x: 0 },
|
|
};
|
|
|
|
export const slideFromRightVariants: Variants = {
|
|
initial: { opacity: 0, x: 50 },
|
|
animate: { opacity: 1, x: 0 },
|
|
};
|
|
|
|
export const slideFromBottomVariants: Variants = {
|
|
initial: { opacity: 0, y: 70 },
|
|
animate: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
export const slideFromTopVariants: Variants = {
|
|
initial: { opacity: 0, y: -50 },
|
|
animate: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
export const fadeVariants: Variants = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
};
|
|
|
|
export const cardInViewVariants: Variants = {
|
|
initial: { opacity: 0, y: 50 },
|
|
animate: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
export const dropdownVariants: Variants = {
|
|
initial: { opacity: 0, y: -10, scale: 0.98 },
|
|
animate: { opacity: 1, y: 0, scale: 1 },
|
|
exit: { opacity: 0, y: -10, scale: 0.98 },
|
|
};
|
|
|
|
export const listContentVariants: Variants = {
|
|
initial: { opacity: 0, y: 70 },
|
|
animate: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, y: 30 },
|
|
};
|
|
|
|
export const pageTitleTransition: Transition = { duration: 0.5, delay: 0.1 };
|
|
export const slideFromLeftTransition: Transition = { duration: 0.5, delay: 0.2 };
|
|
export const slideFromLeftTransitionNoDelay: Transition = { duration: 0.5 };
|
|
export const slideFromLeftOnMountTransition: Transition = { duration: 0.5, delay: 0.1 };
|
|
export const slideFromRightOnMountTransition02: Transition = { duration: 0.5, delay: 0.2 };
|
|
export const slideFromLeftInViewTransition03: Transition = { duration: 0.5, delay: 0.3 };
|
|
export const slideFromRightTransition: Transition = { duration: 0.5, delay: 0.3 };
|
|
export const slideFromRightInViewTransition04: Transition = { duration: 0.5, delay: 0.4 };
|
|
export const slideFromBottomTransition: Transition = { duration: 0.5, delay: 0.4 };
|
|
export const slideFromBottomInViewTransition: Transition = { duration: 0.5, delay: 0.1 };
|
|
export const slideFromRightOnMountTransition: Transition = { duration: 0.5, delay: 0.5 };
|
|
export const slideFromTopTransition: Transition = { duration: 0.5 };
|
|
export const slideFromTopTransitionDelayed: Transition = { duration: 0.5, delay: 0.1 };
|
|
export const cardInViewTransition: Transition = { duration: 0.5, delay: 0.1 };
|
|
export const dropdownTransition: Transition = { duration: 0.2, ease: "easeOut" };
|
|
export const listContentTransition: Transition = { duration: 0.4, ease: "easeOut" };
|
|
export const fadeTransition: Transition = { duration: 0.15 };
|
|
|