{"id":4202,"date":"2024-04-08T09:13:39","date_gmt":"2024-04-08T07:13:39","guid":{"rendered":"https:\/\/juannunezblasco.es\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/"},"modified":"2024-05-08T21:03:18","modified_gmt":"2024-05-08T19:03:18","slug":"transiciones-de-pagina-y-animaciones-con-next-js-framer","status":"publish","type":"post","link":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/","title":{"rendered":"Page transitions and animations with Next.js + Framer [REPO]"},"content":{"rendered":"\n<p>The goal of this tutorial is to implement navigation animations in Next.js. The end result will be this subtle animation that will improve the appearance of your application.<\/p>\n\n<figure class=\"wp-block-video\"><video controls=\"\" src=\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/Grabacio&#x301;n-de-pantalla-2024-04-07-a-las-18.31.28.mov\"><\/video><\/figure>\n\n<p>I have created a codesandbox so you can analyze the result in the following link:<\/p>\n\n<p><a href=\"https:\/\/codesandbox.io\/p\/github\/juannunezblasco\/next-framer-motion\/main\">https:\/\/codesandbox.io\/p\/github\/juannunezblasco\/next-framer-motion\/main<\/a><\/p>\n\n<p>Now we are going to analyze step by step how to carry out the implementation.<\/p>\n\n<h2 id=\"por-que-incluir-animaciones-ente-rutas-de-tu-aplicacion-de-next-js\">Why include animations between routes in your Next.js application<\/h2>\n\n<p>In terms of user experience, animations are an essential element that provides feedback when an action is performed. Used to give the sensation of greater interactivity and provide information to the client during the loading of resources.<\/p>\n\n<p>Additionally, animations can be used to increase the feeling of loading speed when loading times are high.<\/p>\n\n<p>But in many cases we fall into the trap of making animations that only seek visual delight and demonstrate the skill of the developer behind it.<\/p>\n\n<p>Whoever hasn&#8217;t done it should cast the first stone.<\/p>\n\n<p>Let&#8217;s see how to implement page transitions and basic animations with Next.js and framer.<\/p>\n\n<h2 id=\"configuracion-base-del-proyecto\">Base project configuration<\/h2>\n\n<p>For this tutorial I will use the base installation of Next.js with Typescript and Tailwind.<\/p>\n\n<pre class=\"wp-block-code lang-markup\"><code>pnpm create next-app --typescript<\/code><\/pre>\n\n<pre class=\"wp-block-code lang-markup\"><code>\u279c  blog pnpm create next-app --typescript\n...\/Library\/pnpm\/store\/v3\/tmp\/dlx-12645  |   +1 +\n...\/Library\/pnpm\/store\/v3\/tmp\/dlx-12645  | Progress: resolved 1, reused 0, downloaded 1, added 1, done\n\u2714 What is your project named? \u2026 next-framer-motion\n\u2714 Would you like to use ESLint? \u2026 No \/ Yes\n\u2714 Would you like to use Tailwind CSS? \u2026 No \/ Yes\n\u2714 Would you like to use `src\/` directory? \u2026 No \/ Yes\n\u2714 Would you like to use App Router? (recommended) \u2026 No \/ Yes\n\u2714 Would you like to customize the default import alias (@\/*)? \u2026 No \/ Yes<\/code><\/pre>\n\n<p>All routes will share the same layout:<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>export default function RootLayout({\n  children,\n}: Readonly&lt;{\n  children: React.ReactNode;\n}&gt;) {\n  return (\n&lt;html lang=\"en\"&gt;\n&lt;body className='min-h-dvh overflow-x-hidden flex flex-col'&gt;\n  &lt;header className=\"py-8 bg-black flex flex-col items-center\"&gt;\n    &lt;nav className=\"container flex items-center\"&gt;\n      &lt;Link className=\"mr-4\" href=\"\/\"&gt;Home&lt;\/Link&gt;\n      &lt;Link className=\"mr-4\" href=\"\/about\"&gt;About&lt;\/Link&gt;\n      &lt;Link href=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n    &lt;\/nav&gt;\n  &lt;\/header&gt;\n  &lt;main&gt;\n    {children}\n  &lt;\/main&gt;\n  &lt;footer&gt;&lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n  );\n}<\/code><\/pre>\n\n<p>Once the project is installed we will create the following routes to carry out the implementation:<\/p>\n\n<ul><li>Home<\/li><li>About<\/li><li>Blog<\/li><\/ul>\n\n<p>All of them will have a similar structure.<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>export default function Page() {\n  return (\n    &lt;div className=\"bg-blue-500\"&gt;\n      &lt;div className=\"container flex flex-col items-center content-center justify-between h-&#91;90vh] mx-auto\"&gt;\n        &lt;h1 className=\"text-white my-auto font-extrabold text-xl\"&gt;Page&lt;\/h1&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n<h2 id=\"implementar-framer-motion-para-next-js\">Implement Framer Motion for Next.js<\/h2>\n\n<p>First we import the Framer library as indicated on their website:<\/p>\n\n<pre class=\"wp-block-code lang-markup\"><code>pnpm add framer-motion<\/code><\/pre>\n\n<p>To implement this library we have to create several components.<\/p>\n\n<p>First of all we have to create a context provider to manage the state of our application between transitions.<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>\/\/ context.tsx\n\n\"use client\";\n\nimport { useRouter } from \"next\/navigation\";\nimport { PropsWithChildren, createContext, use, useTransition } from \"react\";\n\nexport const DELAY = 400;\n\nconst sleep = (ms: number) =&gt;\n  new Promise&lt;void&gt;((resolve) =&gt; setTimeout(() =&gt; resolve(), ms));\nconst noop = () =&gt; {};\n\ntype TransitionContext = {\n  pending: boolean;\n  navigate: (url: string) =&gt; void;\n};\nconst Context = createContext&lt;TransitionContext&gt;({\n  pending: false,\n  navigate: noop,\n});\nexport const useNavigationTransition = () =&gt; use(Context);\n\nexport default function Transitions({ children }: PropsWithChildren) {\n  const &#91;pending, start] = useTransition();\n  const router = useRouter();\n  const navigate = (href: string) =&gt; {\n    start(async () =&gt; {\n      await Promise.all(&#91;router.push(href), sleep(DELAY)]);\n    });\n  };\n\n  return (\n    &lt;Context.Provider value={{ pending, navigate }}&gt;\n      {children}\n    &lt;\/Context.Provider&gt;\n  );\n}<\/code><\/pre>\n\n<p>The sleep function will help us determine the duration of the transition. Which we will set through the DELAY constant.<\/p>\n\n<p>Then we create a context with two variables:<\/p>\n\n<ul><li>Pending: Sets when the animation is running.<\/li><li>Navigate: a function where we manage the Next.js router<\/li><\/ul>\n\n<p>To implement Framer we have to create a component where we import AnimatePresence and motion from Framer.<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>\/\/ Navitate.tsx\n\n\"use client\";\n\nimport { PropsWithChildren } from \"react\";\nimport { DELAY, useNavigationTransition } from \".\/context\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { usePathname } from \"next\/navigation\";\n\nexport default function Animate({ children }: PropsWithChildren) {\n  const { pending } = useNavigationTransition();\n  const pathname = usePathname();\n  return (\n    &lt;AnimatePresence mode=\"popLayout\"&gt;\n      {!pending &amp;&amp; (\n        &lt;motion.div\n          key={pathname}\n          className=\"flex-1\"\n          initial={{ x: 300, opacity: 0 }}\n          animate={{ x: 0, opacity: 1 }}\n          exit={{ x: 300, opacity: 0 }}\n          transition={{ ease: \"circInOut\", duration: DELAY \/ 1000 }}\n        &gt;\n          {children}\n        &lt;\/motion.div&gt;\n      )}\n    &lt;\/AnimatePresence&gt;\n  );\n}<\/code><\/pre>\n\n<p>Now we include our component in the Layout that I showed you at the beginning of the article:<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>\/\/ layout.tsx\n\nexport default function RootLayout({\n  children,\n}: Readonly&lt;{\n  children: React.ReactNode;\n}&gt;) {\n  return (\n    &lt;html lang=\"en\"&gt;\n      &lt;body className='min-h-dvh overflow-x-hidden flex flex-col'&gt;\n        &lt;Transitions&gt;\n          &lt;header className=\"py-8 bg-black flex flex-col items-center\"&gt;\n            &lt;nav className=\"container flex items-center\"&gt;\n              &lt;Link className=\"mr-4\" href=\"\/\"&gt;Home&lt;\/Link&gt;\n              &lt;Link className=\"mr-4\" href=\"\/about\"&gt;About&lt;\/Link&gt;\n              &lt;Link href=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/nav&gt;\n          &lt;\/header&gt;\n          &lt;Animate&gt;\n            &lt;main&gt;\n              {children}\n            &lt;\/main&gt;\n          &lt;\/Animate&gt;\n          &lt;footer&gt;&lt;\/footer&gt;\n        &lt;\/Transitions&gt;\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}<\/code><\/pre>\n\n<p>But we&#8217;re not done yet.<\/p>\n\n<p>We have to create a component that replaces the native NextLink.<\/p>\n\n<pre class=\"wp-block-code lang-tsx\"><code>\/\/ Link.tsx\n\n\"use client\";\n\nimport NextLink from \"next\/link\";\nimport { ComponentProps } from \"react\";\nimport { useNavigationTransition } from \".\/context\";\nimport { usePathname } from \"next\/navigation\";\n\ntype Props = ComponentProps&lt;typeof NextLink&gt;;\n\n\nconst Link = (props: Props) =&gt; {\n  const routePath = usePathname();\n  const { navigate } = useNavigationTransition();\n  return (\n    &lt;NextLink\n      {...props}\n      onClick={(e) =&gt; {\n        e.preventDefault();\n        const href = e.currentTarget.getAttribute(\"href\");\n        if (href === routePath) return;\n        if (href) navigate(href);\n      }}\n    \/&gt;\n  );\n};\n\nexport default Link;<\/code><\/pre>\n\n<p>You can see the complete project on GitHub and Codesandbox:<\/p>\n\n<ul><li><a href=\"https:\/\/github.com\/juannunezblasco\/next-framer-motion\">https:\/\/github.com\/juannunezblasco\/next-framer-motion<\/a><\/li><li><a href=\"https:\/\/codesandbox.io\/p\/github\/juannunezblasco\/next-framer-motion\/main\">https:\/\/codesandbox.io\/p\/github\/juannunezblasco\/next-framer-motion\/main<\/a><\/li><\/ul>\n\n<p>If you found it useful, share the article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The goal of this tutorial is to implement navigation animations in Next.js. The end result will be this subtle animation that will improve the appearance [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[73],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web\" \/>\n<meta property=\"og:description\" content=\"The goal of this tutorial is to implement navigation animations in Next.js. The end result will be this subtle animation that will improve the appearance [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/\" \/>\n<meta property=\"og:site_name\" content=\"J - Desarrollo Aplicaciones Web\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-08T07:13:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-08T19:03:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1360\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan N\u00fa\u00f1ez Blaco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/juannunezblasco.es\/#organization\",\"name\":\"J - Desarrollo Aplicaciones Web\",\"url\":\"https:\/\/juannunezblasco.es\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png\",\"contentUrl\":\"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png\",\"width\":512,\"height\":513,\"caption\":\"J - Desarrollo Aplicaciones Web\"},\"image\":{\"@id\":\"https:\/\/juannunezblasco.es\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/juannunezblasco.es\/#website\",\"url\":\"https:\/\/juannunezblasco.es\/\",\"name\":\"J - Desarrollo Aplicaciones Web\",\"description\":\"Dise\u00f1o y desarrollos de productos digitales a medida\",\"publisher\":{\"@id\":\"https:\/\/juannunezblasco.es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/juannunezblasco.es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg\",\"contentUrl\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg\",\"width\":1360,\"height\":630,\"caption\":\"Next.js animations with Framer motion\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage\",\"url\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/\",\"name\":\"Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web\",\"isPartOf\":{\"@id\":\"https:\/\/juannunezblasco.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage\"},\"datePublished\":\"2024-04-08T07:13:39+00:00\",\"dateModified\":\"2024-05-08T19:03:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/juannunezblasco.es\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Page transitions and animations with Next.js + Framer [REPO]\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage\"},\"author\":{\"@id\":\"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29\"},\"headline\":\"Page transitions and animations with Next.js + Framer [REPO]\",\"datePublished\":\"2024-04-08T07:13:39+00:00\",\"dateModified\":\"2024-05-08T19:03:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage\"},\"wordCount\":413,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/juannunezblasco.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg\",\"articleSection\":[\"Next.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29\",\"name\":\"Juan N\u00fa\u00f1ez Blaco\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g\",\"caption\":\"Juan N\u00fa\u00f1ez Blaco\"},\"description\":\"Full Stack Developer\",\"sameAs\":[\"https:\/\/juannunezblasco.es\"],\"url\":\"https:\/\/juannunezblasco.es\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/","og_locale":"en_US","og_type":"article","og_title":"Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web","og_description":"The goal of this tutorial is to implement navigation animations in Next.js. The end result will be this subtle animation that will improve the appearance [&hellip;]","og_url":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/","og_site_name":"J - Desarrollo Aplicaciones Web","article_published_time":"2024-04-08T07:13:39+00:00","article_modified_time":"2024-05-08T19:03:18+00:00","og_image":[{"width":1360,"height":630,"url":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan N\u00fa\u00f1ez Blaco","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/juannunezblasco.es\/#organization","name":"J - Desarrollo Aplicaciones Web","url":"https:\/\/juannunezblasco.es\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/#logo","inLanguage":"en-US","url":"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png","contentUrl":"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png","width":512,"height":513,"caption":"J - Desarrollo Aplicaciones Web"},"image":{"@id":"https:\/\/juannunezblasco.es\/#logo"}},{"@type":"WebSite","@id":"https:\/\/juannunezblasco.es\/#website","url":"https:\/\/juannunezblasco.es\/","name":"J - Desarrollo Aplicaciones Web","description":"Dise\u00f1o y desarrollos de productos digitales a medida","publisher":{"@id":"https:\/\/juannunezblasco.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/juannunezblasco.es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage","inLanguage":"en-US","url":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg","contentUrl":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg","width":1360,"height":630,"caption":"Next.js animations with Framer motion"},{"@type":"WebPage","@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage","url":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/","name":"Page transitions and animations with Next.js + Framer [REPO] | J - Desarrollo Aplicaciones Web","isPartOf":{"@id":"https:\/\/juannunezblasco.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage"},"datePublished":"2024-04-08T07:13:39+00:00","dateModified":"2024-05-08T19:03:18+00:00","breadcrumb":{"@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/juannunezblasco.es\/en\/"},{"@type":"ListItem","position":2,"name":"Page transitions and animations with Next.js + Framer [REPO]"}]},{"@type":"Article","@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#article","isPartOf":{"@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage"},"author":{"@id":"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29"},"headline":"Page transitions and animations with Next.js + Framer [REPO]","datePublished":"2024-04-08T07:13:39+00:00","dateModified":"2024-05-08T19:03:18+00:00","mainEntityOfPage":{"@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#webpage"},"wordCount":413,"commentCount":0,"publisher":{"@id":"https:\/\/juannunezblasco.es\/#organization"},"image":{"@id":"https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#primaryimage"},"thumbnailUrl":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/next-framer-motion-blogpost.jpg","articleSection":["Next.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/juannunezblasco.es\/en\/transiciones-de-pagina-y-animaciones-con-next-js-framer\/#respond"]}]},{"@type":"Person","@id":"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29","name":"Juan N\u00fa\u00f1ez Blaco","image":{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g","caption":"Juan N\u00fa\u00f1ez Blaco"},"description":"Full Stack Developer","sameAs":["https:\/\/juannunezblasco.es"],"url":"https:\/\/juannunezblasco.es\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4202"}],"collection":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/comments?post=4202"}],"version-history":[{"count":2,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4202\/revisions"}],"predecessor-version":[{"id":4215,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4202\/revisions\/4215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/media\/4092"}],"wp:attachment":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/media?parent=4202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/categories?post=4202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/tags?post=4202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}