Motion Link
Fade out/Fade in Link
Next.js links are fast, but the sudden changes aren’t smooth. Using libraries like Framer Motion or GSAP feels like overkill for such minor animations and unnecessarily increases bundle size. What if we achieve smooth transitions with just a simple prop, no extra libraries?
npx argn-ui@latest add motionLink --target <your-component-className>
NOTE: --target <your-component-className> is optional. Use it to animate a specific element/container when changing routes. If not used, the whole body will animate by default.
This makes a utils folder with a motionLink component. It has smooth built-in CSS motion, no extra size or heavy libraries. Just use it instead of the Next.js Link tag.
Examples
<MotionLink href="/">Home</MotionLink>
<MotionLink href="/installation">Installation</MotionLink>
<MotionLink href="/components">Component</MotionLink>Watch the route change animations on this site!