Refining Visual Harmony
Explore the principles of motion aesthetics that enhance the visual appeal of interfaces. Learn to balance timing, easing, and the flow of motion to create seamless user experiences.
Installation
Install the following dependencies:
pnpm add motion
Create a file at components/motion/transition-panel.tsx and paste the
given code.
"use client";
import {
AnimatePresence,
Transition,
Variant,
motion,
MotionProps,
} from "motion/react";
import { cn } from "@/lib/utils";
export type TransitionPanelProps = {
children: React.ReactNode[];
className?: string;
transition?: Transition;
activeIndex: number;
variants?: { enter: Variant; center: Variant; exit: Variant };
} & MotionProps;
export function TransitionPanel({
children,
className,
transition,
variants,
activeIndex,
...motionProps
}: TransitionPanelProps) {
return (
<div className={cn("relative", className)}>
<AnimatePresence
initial={false}
mode="popLayout"
custom={motionProps.custom}
>
<motion.div
key={activeIndex}
variants={variants}
transition={transition}
initial="enter"
animate="center"
exit="exit"
{...motionProps}
>
{children[activeIndex]}
</motion.div>
</AnimatePresence>
</div>
);
}