Framer page transitions animate the change between pages when a visitor clicks a link, replacing the harsh flash of a full page reload with a smooth motion sequence. They run on the client without server round-trips, support fade, slide, and shared element styles, and improve perceived speed and brand polish across the entire site.
Why Page Transitions Matter
The default web behavior is jarring. A visitor clicks a link, the screen goes white, the new page paints, and they wait. Page transitions remove that gap by morphing the current page into the next one with intentional motion. The visitor never sees a blank state, the perceived load time drops, and the site feels closer to a native application than a series of disconnected documents.
Beyond perception, transitions reinforce brand. A fast fade signals minimalism. A bold slide signals confidence. A shared element transition where a hero image grows into the next page signals craft. Each style communicates something about the underlying product before the visitor reads a word of copy.
How Framer Implements Transitions
Framer page transitions work at the route level. When a visitor navigates between two pages in your project, Framer holds the old page in memory while the new one mounts behind it, runs the configured animation between them, then unmounts the old page. This is similar to how single-page apps handle route changes in React or Vue.
You configure transitions in the page settings panel. Each page can have its own enter and exit transition, or you can set a project-wide default that applies to every navigation. Most sites use one consistent transition style across the entire site for coherence, with exceptions for special moments like landing pages or case studies.
Built-In Transition Styles
Framer ships with a set of preset transitions covering the most common patterns: fade, slide, scale, and dissolve. Each has tunable parameters for duration, easing, and direction. The defaults look professional out of the box, and most projects start there before customizing.
Fade
Fade is the safest choice. The old page fades to transparent while the new page fades in. Duration in the 250ms to 400ms range feels responsive without dragging. Fade works on every type of layout and never fights with content underneath, making it the default recommendation for client work where reliability matters more than novelty.
Slide
Slide moves the old page off in one direction while the new page slides in from the opposite. Common patterns are horizontal slide for sibling pages in a sequence and vertical slide for hierarchical navigation. Slide adds spatial meaning but can feel exhausting if every navigation uses it. Reserve slide for sections where the relationship between pages is logically sequential.
Scale and Zoom
Scale transitions grow or shrink the page during the change. A subtle zoom-out on exit paired with a zoom-in on entry adds depth without becoming distracting. Heavy scale movements feel theatrical and work best on portfolio sites or creative agencies where bold motion is part of the brand.
Custom Transitions With Variants
For projects that need bespoke transitions, Framer supports custom transitions built using variants. Define the entry and exit states of page elements, attach them to navigation events, and the engine handles interpolation. This unlocks effects like staggered children, masked reveals, and choreographed sequences across multiple elements.
Most custom transitions involve three elements moving in coordinated timing: the page background, the navigation, and the primary content block. Stagger their entries by 50ms to 150ms for a layered feel that signals depth. For more on variants, see our framer animations complete guide.
Shared Element Transitions
Shared element transitions are the holy grail of page motion. A thumbnail on a portfolio grid grows seamlessly into the hero of the detail page. The visitor experiences a continuous spatial relationship between the list and the detail, rather than two disconnected screens.
Framer supports shared element transitions through layer IDs. Give a layer the same ID on both the source and destination pages, configure the shared element transition, and Framer animates the position, size, and properties between the two states. The effect is striking and looks expensive without much engineering effort.
When to Use Shared Elements
Shared element transitions work best when the source and destination genuinely share an element semantically. A product card morphing into a product page hero makes sense. A logo morphing into a paragraph does not. Use the technique to reinforce relationships that already exist in the information architecture.
Timing and Easing Curves
Most polished page transitions live or die on timing and easing. The duration tells the visitor how long to wait; the easing curve tells them how the motion should feel. The two interact, so changing one usually requires re-tuning the other.
- Use ease-out for entries. The new page should arrive quickly and settle gently. An ease-out curve front-loads the motion and slows toward the resting state, which feels welcoming rather than abrupt.
- Use ease-in for exits. The old page should leave slowly at first and accelerate as it goes, like a door swinging shut. Reversing the curve makes the exit feel intentional rather than yanked.
- Reserve cubic-bezier curves for hero moments. Custom cubic-bezier values let you tune snappy or bouncy transitions for landing pages, but they require careful design. A subtle overshoot of 1.05 followed by a settle to 1.0 works well; anything heavier feels gimmicky.
- Match the easing to the brand. Editorial brands favor slower, more elegant curves. Tech and SaaS brands favor sharper, faster transitions. Each easing curve communicates personality before the visitor reads a word.
Performance Considerations
Page transitions run on the client and consume CPU and GPU resources. Most transitions are GPU-accelerated and have negligible cost, but custom transitions with many staggered children or heavy effects can cause jank on lower-end devices. Test on actual hardware before shipping.
Long transitions also feel slow. A 600ms transition between every page makes the site feel laggy even if the page itself loads quickly. Keep most transitions under 400ms, with hero moments reserved for the rare case where the visual reward justifies the wait. For performance guidance, see our speed optimization guide.
Mobile Considerations
Mobile devices have less rendering headroom and visitors have less patience. Reduce transition durations by 20 to 30 percent on mobile breakpoints. Simplify or disable expensive effects like backdrop blur during transitions. Slide and fade work well on mobile, while heavy scale and shared element transitions need careful testing.
Pair page transitions with our framer mobile optimization guide for the full mobile experience checklist.
SEO and Crawl Considerations
Page transitions are visual layers on top of standard navigation. The underlying links remain real anchor tags pointing to real URLs, which means search engines crawl the site normally. Transitions do not interfere with indexing, sitemaps, or canonical tags.
One caveat is preloading. Framer can preload linked pages on hover or viewport entry to make transitions feel instant. Configure preloading in the project settings, with care not to preload aggressively on slow connections where bandwidth is precious. For more on Framer search performance, see our framer SEO guide.
Accessibility and Motion Preferences
Some visitors have vestibular sensitivities triggered by motion. The prefers-reduced-motion media query lets browsers signal that the visitor wants minimal animation. Framer respects this preference and reduces or disables transitions when it is set, which is the correct default.
Audit your custom transitions for reduced-motion behavior. Heavy spatial movements should degrade to a simple fade when reduced motion is requested. This is both ethical and required for serious accessibility compliance. Beyond reduced motion, screen reader users benefit when navigation triggers a focus shift to the new page heading. Without it, focus can get stuck on the link they just activated, which is confusing on a single-page-app routing model.
Comparing to Other Platforms
Framer page transitions go further than most other website builders. Webflow recently added similar route-level transitions but with fewer presets and less granular timing control. Squarespace and Wix offer page transitions through limited theme settings, usually a single fade option. WordPress page transitions require a plugin or custom JavaScript, with quality depending on the theme. Shopify themes vary, with the strongest matching the smoothness of native commerce apps. The advantage of Framer is that the transition system is built into the platform rather than bolted on.
Examples of Transition Patterns in the Wild
Looking at how leading sites handle page transitions clarifies what works. Studying their choices is faster than guessing from first principles.
- Linear: Uses a quick crossfade at roughly 200 milliseconds. The brevity reinforces the product’s snappy feel and never makes the user wait.
- Apple: Combines a subtle scale with fade on product pages, so each new product feels like it stepped forward. The motion is short and easy to miss, which is the point.
- Stripe: Uses near-instant transitions with a soft fade, prioritizing speed over showmanship. This matches the brand’s focus on developer trust.
- Bruno Simon’s portfolio: Goes the other direction with bold, theatrical transitions that double as part of the brand. This only works because the entire site is built around motion as the primary medium.
- Vercel: Mixes shared element transitions for blog images with simple fades elsewhere. The selective use of shared elements signals craftsmanship without overstaying its welcome.
Implementing Loading States Within Transitions
Page transitions assume the next page is ready when the transition completes. On slow networks or for pages with heavy CMS data, the next page may still be loading mid-transition. Without planning for this, the transition completes onto a half-painted page, which looks broken.
The fix is a loading state that bridges the gap. Framer can hold the transition on a skeleton state while the new page mounts, then complete the transition once content is ready. For most marketing sites this is unnecessary, but content-heavy CMS sites with image-heavy pages benefit from explicit loading choreography. Test by throttling network to slow 3G and walking through navigation.
Common Mistakes to Avoid
The first mistake is using different transitions on every page. The variety feels chaotic. Pick one default transition and stick to it, varying only for intentional special moments.
The second is overlong durations. Anything over 500ms starts to feel like waiting. The third is forgetting to test on real devices, especially older Android phones where motion budgets are tight.
The fourth is fighting browser navigation. The back button should respect transition direction. If your slide goes left on forward navigation, it should go right on back. Framer handles this automatically for built-in transitions but custom ones need manual handling.
The fifth is layering page transitions on top of in-page entrance animations, so the visitor sees a fade-in followed immediately by another wave of section animations. Choose one motion budget per navigation. Either the page transitions in fully then the sections animate, or the section animations are skipped on subsequent loads.
Frequently Asked Questions
Do page transitions affect SEO?
No. Transitions are visual layers over standard HTML navigation. Search engines see real links pointing to real URLs and crawl the site normally. Indexing, sitemaps, and canonical tags work as expected.
Can I have different transitions per page?
Yes. Each page can override the project default with its own enter and exit transition. Most sites pick one consistent style for coherence, but per-page overrides are useful for landing pages or hero moments.
How long should a page transition be?
Most transitions should be 250ms to 400ms. Longer feels slow, shorter feels abrupt. Reserve longer durations for shared element transitions where the spatial relationship justifies the time.
Do transitions work with the browser back button?
Yes. Framer reverses the transition direction on back navigation for built-in styles. Custom transitions need manual reverse handling, which the variants system supports through animation properties.
Can I disable transitions for accessibility?
Yes. Framer respects the prefers-reduced-motion browser setting and falls back to a simple fade or instant change. Audit custom transitions to ensure they degrade gracefully when reduced motion is requested.