var Component=(()=>{var g=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var t=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),b=(l,n)=>{for(var r in n)a(l,r,{get:n[r],enumerable:!0})},d=(l,n,r,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of f(n))!k.call(l,o)&&o!==r&&a(l,o,{get:()=>n[o],enumerable:!(c=m(n,o))||c.enumerable});return l};var h=(l,n,r)=>(r=l!=null?g(B(l)):{},d(n||!l||!l.__esModule?a(r,"default",{value:l,enumerable:!0}):r,l)),x=l=>d(a({},"__esModule",{value:!0}),l);var E=t((S,p)=>{p.exports=_jsx_runtime});var F=t((A,y)=>{y.exports=React});var N={};b(N,{default:()=>T,frontmatter:()=>w});var e=h(E());var s=h(F()),v=()=>((0,s.useEffect)(()=>{(()=>{window.adsbygoogle&&window.adsbygoogle.length&&window.adsbygoogle.pop();try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(r){console.log(r)}})();let n=setInterval(()=>{window.adsbygoogle&&window.adsbygoogle.length&&window.adsbygoogle.pop();try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(r){console.log(r)}},3e4);return()=>{clearInterval(n)}},[]),s.default.createElement("div",{id:"articlead",className:"flex justify-center items-center my-4",style:{minHeight:"90px",width:"100%"}},s.default.createElement("ins",{className:"adsbygoogle",style:{display:"block",width:"100%",height:"90px"},"data-ad-client":"ca-pub-9106810782791939","data-ad-slot":"1231471675","data-ad-format":"auto","data-full-width-responsive":"true"}))),i=v;var w={title:"How to Create Page Transition Animations in Next.js Apps: A Step-by-Step Tutorial",description:"In this comprehensive tutorial, I will walk you through creating page transition animations in Next.js apps using TypeScript and CSS.",image:"../../public/blogs/animation-transitions.png",publishedAt:"2024-08-08",updatedAt:"2024-08-08",author:"Jared Hooker",isPublished:!0,tags:["next.js","tutorial","TypeScript","CSS","animation","transitions","page","page-transitions"]};function u(l){let n=Object.assign({h1:"h1",a:"a",span:"span",p:"p",code:"code",h2:"h2",div:"div",pre:"pre",blockquote:"blockquote",h3:"h3",strong:"strong",ul:"ul",li:"li"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h1,{id:"introduction",children:["Introduction",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:["Adding page transitions can significantly enhance the user experience by making navigation feel smoother and more intuitive. This guide will show you how to implement a reusable ",(0,e.jsx)(n.code,{children:"TransitionLink"})," component in a Next.js application, allowing you to apply page transitions to any link in your project."]}),` `,(0,e.jsxs)(n.h2,{id:"1-setting-up-the-project",children:["1. Setting Up the Project",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#1-setting-up-the-project",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(n.p,{children:"First, ensure you have a Next.js project set up. If you don't already have one, you can create it with the following command:"}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"create-next-app@latest"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"--example"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"with-typescript"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"--ts"})]})})})}),` `,(0,e.jsx)(n.p,{children:"Install any dependencies if needed, and make sure your project is running smoothly by using:"}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"npm"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"run"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"dev"})]})})})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"The TransitionLink component can be extended to support more complex animations and interactions."}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"2-creating-the-transitionlink-component",children:["2. Creating the ",(0,e.jsx)(n.code,{children:"TransitionLink"})," Component",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#2-creating-the-transitionlink-component",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:["We'll create a custom ",(0,e.jsx)(n.code,{children:"TransitionLink"})," component that wraps the Next.js ",(0,e.jsx)(n.code,{children:"Link"})," component, adding transition effects before navigating to the new page."]}),` `,(0,e.jsxs)(n.p,{children:["Create a file named ",(0,e.jsx)(n.code,{children:"TransitionLink.tsx"})," in the ",(0,e.jsx)(n.code,{children:"utils"})," directory (or any directory you prefer) and add the following code:"]}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Link, { LinkProps } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'next/link'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React, { ReactNode } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useRouter } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'next/navigation'"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TransitionLinkProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"extends"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"LinkProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"children"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"onClick"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"e"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"MouseEvent"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLAnchorElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"MouseEvent"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"void"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"sleep"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"number"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"Promise"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"void"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"> {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Promise"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"resolve"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"setTimeout"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(resolve, ms))"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" children,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" href,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" onClick,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TransitionLinkProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"router"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"useRouter"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"handleTransition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"async"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"e"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"MouseEvent"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLAnchorElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"MouseEvent"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" e."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Call the custom onClick handler if provided"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"if"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (onClick) {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"onClick"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(e)"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"body"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" document."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"querySelector"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'body'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" body?.classList."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"add"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'page-transition'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"await"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"sleep"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" router."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"push"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(href)"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"await"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"sleep"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" body?.classList."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"remove"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'page-transition'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Link"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"onClick"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{handleTransition}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{href} {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}>"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,e.jsx)(i,{}),` `,(0,e.jsxs)(n.h3,{id:"explanation",children:["Explanation:",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#explanation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:"sleep(ms: number)"})}),": A helper function that pauses the execution for a specified number of milliseconds. This allows us to control the timing of our transitions."]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:"handleTransition function"})}),": This function first prevents the default link behavior, applies the transition effect by adding the ",(0,e.jsx)(n.code,{children:"page-transition"})," class to the body, and then uses the ",(0,e.jsx)(n.code,{children:"useRouter"})," hook to navigate to the new page after a delay."]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:"TransitionLink"})," component"]}),": This is a wrapper around the Next.js ",(0,e.jsx)(n.code,{children:"Link"})," component. It handles the transition effect when the link is clicked, making navigation feel more fluid."]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"CSS transitions are hardware-accelerated, making them more efficient than JavaScript-based animations."}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"3-applying-the-transitions",children:["3. Applying the Transitions",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#3-applying-the-transitions",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:["Next, we'll define the CSS for the transition effects. In your global CSS file (usually ",(0,e.jsx)(n.code,{children:"globals.css"})," or ",(0,e.jsx)(n.code,{children:"styles.css"}),"), add the necessary styles for the transitions:"]}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"css","data-theme":"default",children:(0,e.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"body"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transition-property"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": opacity, "}),(0,e.jsx)(n.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:"background"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", transform, filter;"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transition-timing-function"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transition-duration"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:".page-transition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"opacity"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"background"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"black"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transform"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"translateY"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"40"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"px"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"filter"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"blur"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"12"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"px"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,e.jsxs)(n.h3,{id:"explanation-1",children:["Explanation:",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#explanation-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:"body"})}),": We define the properties that will transition, such as opacity, background, transform, and filter. The duration and timing function control how the transition feels."]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:".page-transition"})}),": This class is applied during the transition, causing the page to fade out, move slightly down, and blur, while the background changes to black."]}),` `,(0,e.jsxs)(n.h2,{id:"4-integrating-the-transitionlink-component",children:["4. Integrating the ",(0,e.jsx)(n.code,{children:"TransitionLink"})," Component",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#4-integrating-the-transitionlink-component",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:["You can now use the ",(0,e.jsx)(n.code,{children:"TransitionLink"})," component in your pages. Here\u2019s how to integrate it into your navigation menu or anywhere you want to use transition links:"]}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { TransitionLink } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'../utils/TransitionLink'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"hidden w-full md:flex flex-grow justify-around"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Services"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-gray-800 duration-300 cursor-pointer text-lg sm:text-2xl"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Services"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Products"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-gray-800 duration-300 cursor-pointer text-lg sm:text-2xl"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Products"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Contact"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-gray-800 duration-300 cursor-pointer text-lg sm:text-2xl"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Contact"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Quote"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-gray-800 duration-300 cursor-pointer text-lg sm:text-2xl"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Quote"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Blog"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-gray-800 duration-300 cursor-pointer text-lg sm:text-2xl"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Blog"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {isAdmin "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"TransitionLink"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/Admin"'})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"nav-link hover:scale-95 hover:text-gray-800 transition-transform text-emerald-700 duration-300 cursor-pointer text-lg sm:text-2xl"'})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Admin"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:""})]})]})})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"useRouter"})," hook in Next.js provides powerful programmatic navigation capabilities."]}),` `]}),` `,(0,e.jsx)(i,{}),` `,(0,e.jsxs)(n.h2,{id:"5-faq",children:["5. FAQ",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#5-faq",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"How can I adjust the transition duration?"}),` You can adjust the transition duration by changing the value in the `,(0,e.jsx)(n.code,{children:"transition-duration"})," property in the CSS."]}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"css","data-theme":"default",children:(0,e.jsx)(n.code,{"data-language":"css","data-theme":"default",children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"transition-duration"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": 700ms;"})]})})})}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"Can I customize the transition effects?"}),` Absolutely! You can modify the properties in the `,(0,e.jsx)(n.code,{children:".page-transition"})," class to achieve different effects."]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"Will this work on all pages?"}),` Yes, as long as the `,(0,e.jsx)(n.code,{children:"TransitionLink"})," component is used, the transition effect will be applied when navigating to any page."]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"Is there any impact on SEO or accessibility?"}),` This method has minimal impact on SEO since it does not interfere with the actual navigation or content loading.`]}),` `,(0,e.jsxs)(n.h2,{id:"6-resources",children:["6. Resources",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#6-resources",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://nextjs.org/docs",children:"Next.js Documentation"})}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions",children:"CSS Transitions"})}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/api-reference/next/router",children:"React useRouter Hook"})}),` `]}),` `]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Next.js supports multiple types of rendering (Static, Server-Side, and Client-Side), making it versatile for building modern web applications."}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"7-additonal-transition-effects",children:["7. Additonal Transition Effects:",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#7-additonal-transition-effects",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(n.p,{children:"Feel free to experiment with the transition animations. Try out the suggestions below or come up with your own. The only limits are the imagination!"}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"css","data-theme":"default",children:(0,e.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"/* "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:" Slide in from right"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"*/"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:".page-transition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"opacity"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transform"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"translateX"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"%"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": transform "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", opacity "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"/* "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:" Zoom in with blur"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"*/"})}),` `,(0,e.jsx)(n.span,{"data-line":""}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:".page-transition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"opacity"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transform"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"scale"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"1.1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"filter"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"blur"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"px"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"transition"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": transform "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", opacity "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", filter "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"500"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"ms"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,e.jsxs)(n.h2,{id:"donate",children:["Donate",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#donate",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(n.p,{children:"If you enjoyed this article, please consider making a donation. Your support means a lot to me."}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Cashapp: $hookerhillstudios"}),` `,(0,e.jsxs)(n.li,{children:["Paypal: ",(0,e.jsx)(n.a,{href:"https://www.paypal.com/ncp/payment/KUWG9HFVBYWHL",children:"Paypal"})]}),` `]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Using transitions can improve the perceived performance of your application by making navigation feel smoother."}),` `]}),` `,(0,e.jsxs)(n.h1,{id:"conclusion",children:["Conclusion",(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(n.p,{children:["By following this guide, you\u2019ve learned how to implement smooth page transitions in your Next.js application using a custom ",(0,e.jsx)(n.code,{children:"TransitionLink"})," component. This enhances the user experience by providing visually appealing navigation effects. Feel free to experiment with different styles and durations to match your site's aesthetics."]}),` `,(0,e.jsx)(n.p,{children:"This approach is scalable, reusable, and easily customizable, making it a valuable addition to your Next.js toolkit."})]})}function C(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(u,l)})):u(l)}var T=C;return x(N);})(); ;return Component;

page

How to Create Page Transition Animations in Next.js Apps: A Step-by-Step Tutorial

Categories Related to page: