How to create page transitions on Framer

intermediate 8 min read Updated 2026-03-18

Quick Answer

Create page transitions in Framer by using the Page component or creating custom transitions with variants and the Animate Presence component. You can set up smooth transitions between pages using built-in transition properties or custom animations.

Try Framer Full Framer Review

Prerequisites

Basic Framer knowledge
Understanding of components and variants
Familiarity with the Framer interface
At least two pages created in your project

Step-by-Step Instructions

Set up your pages structure

In your Framer project, ensure you have multiple pages created. Go to the Pages panel on the left sidebar and verify your pages are properly named. Each page should be a separate frame or use Framer's Page component from the component library.

Name your pages clearly to make navigation setup easier later

Add the Page component for automatic transitions

From the Insert menu, select Page component or press P. Drag it to your canvas and resize it to fill your desired area. In the Properties panel, you'll see transition options including Direction, Duration, and Easing.

The Page component automatically handles swipe gestures on mobile devices

Configure page content and variants

Select your Page component and click Edit Component. Add your different page contents as variants by clicking the + variant button in the properties panel. Name each variant after your pages (e.g., "Home", "About", "Contact"). Design each variant with the corresponding page content.

Set up navigation triggers

Create navigation elements (buttons, links, etc.) and add interactions by selecting the element and clicking the + icon next to Interaction in the properties panel. Choose On Tap or On Click, then select Change Variant and choose your target page variant.

Use meaningful names for your interactions to keep them organized

Customize transition properties

With your Page component selected, adjust the transition settings in the Properties panel:

Transition: Choose from Slide, Push, Modal, or Instant
Direction: Set to Left, Right, Up, or Down
Duration: Adjust timing (typically 0.3-0.8 seconds)
Easing: Select from Linear, Ease, Spring, or custom curves

Spring easing often feels more natural for page transitions

Add custom animations with Animate Presence

For more complex transitions, wrap your page content in an Animate Presence component. Go to Insert > Animate Presence. This allows you to create custom entry and exit animations. Set Initial, Animate, and Exit properties for each page state.

Use opacity and transform properties for smooth custom transitions

Test and refine transitions

Click the Preview button or press Cmd/Ctrl + P to test your transitions. Navigate between pages to ensure smooth performance. Adjust timing, easing, and direction as needed. Test on different device sizes using the Device dropdown in preview mode.

Test on actual mobile devices to ensure touch gestures work properly

Common Issues & Troubleshooting

Transitions feel laggy or choppy

Reduce the complexity of animated elements and use transform properties instead of changing layout properties. Enable Hardware Acceleration in the component settings.

Page transitions not working on mobile

Ensure you're using the Page component rather than custom frames. Check that Touch is enabled in the interaction settings and test in Framer's mobile preview.

Content jumps or flickers during transitions

Set explicit width and height values for your Page component and ensure all variants have consistent dimensions. Use position: absolute for overlapping elements.

Navigation buttons stop working after transition

Make sure navigation elements are outside the Page component or recreated in each variant. Check that interaction targets are correctly set to the Page component, not individual variants.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing