diff --git a/src/motion/variants.ts b/src/motion/variants.ts index 34d641f..e37f035 100644 --- a/src/motion/variants.ts +++ b/src/motion/variants.ts @@ -41,11 +41,16 @@ export const staggerContainer: Variants = { }, }; -/** Route enter/exit transition used with AnimatePresence. */ +/** + * Route enter/exit transition used with AnimatePresence (mode="wait"). The old + * page is removed instantly (exit duration 0) so it never lingers as a ghost + * frame behind the incoming page; only the new page animates, fading in. This + * keeps a visible transition without any cross-fade overlap. + */ export const pageTransition: Variants = { - initial: { opacity: 0, y: 8 }, - enter: { opacity: 1, y: 0, transition: { duration: 0.24, ease: EASE_OUT } }, - exit: { opacity: 0, y: -6, transition: { duration: 0.16, ease: EASE_OUT } }, + initial: { opacity: 0 }, + enter: { opacity: 1, transition: { duration: 0.22, ease: EASE_OUT } }, + exit: { opacity: 0, transition: { duration: 0 } }, }; /** Springy hover lift for cards. Use rest/hover states on an `m` element. */