Transition Panel
Easy way to switch between different pieces of content with enter and exit animations.
Easy way to switch between different pieces of content with enter and exit animations.
Follow these simple steps to add the Transition Panel component to your project:
Install Dependencies
pnpm add motion
Create a new file: components/motions/transition-panel.tsx and copy the code below:
"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>
);
}Adjust the import paths in both files according to your project's structure.
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.