--- title: Advanced page transitions with Next.js and Framer Motion description: Learn how to use Next.js and Framer Motion to create subtle and elegant page transitions on your website. Page transitions help engage users and improve the... canonical: https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Advanced page transitions with Next.js and Framer Motion | daily.dev og:description: Learn how to use Next.js and Framer Motion to create subtle and elegant page transitions on your website. Page transitions help engage users and improve the... og:url: https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd og:image: https://api.daily.dev/og/posts/0vGKFdeGd.png og:image:alt: Advanced page transitions with Next.js and Framer Motion og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Advanced page transitions with Next.js and Framer Motion **[LogRocket](https://daily.dev/sources/logrocket)** · 12 min read · 32 upvotes · 0 comments ## Summary Learn how to use Next.js and Framer Motion to create subtle and elegant page transitions on your website. Page transitions help engage users and improve the overall user experience, but they should be used appropriately and with consideration for the context and content of the website. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#framer-motion](https://daily.dev/tags/framer-motion), [#nextjs](https://daily.dev/tags/nextjs), [#ux](https://daily.dev/tags/ux) [View this post on daily.dev](https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Advanced page transitions with Next.js and Framer Motion","url":"https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd"},"datePublished":"2023-12-28T22:31:33.402Z","dateModified":"2025-09-06T02:21:00.018Z","description":"Learn how to use Next.js and Framer Motion to create subtle and elegant page transitions on your website. Page transitions help engage users and improve the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1a397de0c3dd8940c7080861f81b1336?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1a397de0c3dd8940c7080861f81b1336?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"LogRocket","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"LogRocket","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/logrocket","url":"https://daily.dev/sources/logrocket"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/advanced-page-transitions-with-next-js-and-framer-motion-0vgkfdegd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":32},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"framer-motion,nextjs,ux","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":3,"name":"Advanced page transitions with Next.js and Framer Motion"}]} ```