{"repo":"ismamz/next-transition-router","free":true,"listed":false,"github":"https://github.com/ismamz/next-transition-router","clone":"git clone https://github.com/ismamz/next-transition-router.git","description":"Easily add animated transitions between pages using Next.js App Router and your favorite animation library.","language":"TypeScript","stars":364,"topics":["app-router","nextjs","page-transitions","view-transitions","router-transitions","animation","page-transitions-next","react","transitions","framer-motion"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"next-transition-router Easily add animated transitions between pages using Next.js App Router and your favorite animation library. - Live Demo using GSAP (source code: /example). - Stackblitz Demo using Framer Motion . Features - Automatically detect internal links to handle page transitions (optional auto flag). - Use a custom Link component to manually handle page transitions (when auto is disabled). - Exclusively to be used with Next.js App Router (v14.0.0 or higher). - Quickly add animated transitions between pages using JavaScript or CSS. - Integrate seamlessly with GSAP or any other animation library of your choice (see minimal GSAP example). - If JavaScript is disabled, the router's accessibility is not compromised. - It's really lightweight; the bundle size is less than 8 KB. - Focused on customizable animations, not targeting the View Transitions API. If you're looking to use the View Transitions API, check next-view-transitions. [!WARNING] This project is currently in Beta. Please note that the API may change as features are enhanced and refined. Installation Install the package using your preferred package manager: Usage TransitionRouter Create a client component (e.g.: app/providers.tsx ) to use the TransitionRouter provider: [!NOTE] It should be a client component because you have to pass DOM functions as props to the provider. After that, you should import that component in the layout component (e.g.: app/layout.tsx ). Async Callbacks The leave and enter callbac","default_branch":null,"files":null,"tree":[],"storefront":"/r/ismamz","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ismamz/next-transition-router/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}