Guide
- How-to
- Smooth page
- Transitions
Guide
- How-to
- Smooth page
- Transitions
Guide
- How-to
- Smooth page
- Transitions
How to Create Smooth Page Transitions in Framer
In this Framer blog, I'm breaking down those smooth page transitions you've seen in premium templates. You'll learn how to create professional wipe masks and zoom effects that make your site feel incredibly polished.
Posted by
Nandi
Table of contents
Start with any Framer site
You can remix a free template (like I did) or use your own project, it really doesn’t matter.
By default, most templates just have a basic “appear” animation when switching pages. Not bad, but we’re going to level it up until it looks something like this.
Start with any Framer site
You can remix a free template (like I did) or use your own project, it really doesn’t matter.
By default, most templates just have a basic “appear” animation when switching pages. Not bad, but we’re going to level it up until it looks something like this.
Start with any Framer site
You can remix a free template (like I did) or use your own project, it really doesn’t matter.
By default, most templates just have a basic “appear” animation when switching pages. Not bad, but we’re going to level it up until it looks something like this.
Smooth page transitions.
Smooth page transitions.
Smooth page transitions.
Set up a global transition
This is the cool part. You only have to do this once, and it works across every page. Here’s what to do:
Head to the Pages panel and select your Home page.
Make sure you’re on the primary desktop breakpoint.
On the right side, scroll to the Effects section and click the “+”.
Choose All Pages (not a single page, you want this applied site-wide).
You’re now editing a global page transition. Let’s make it buttery smooth.
Set up a global transition
This is the cool part. You only have to do this once, and it works across every page. Here’s what to do:
Head to the Pages panel and select your Home page.
Make sure you’re on the primary desktop breakpoint.
On the right side, scroll to the Effects section and click the “+”.
Choose All Pages (not a single page, you want this applied site-wide).
You’re now editing a global page transition. Let’s make it buttery smooth.
Set up a global transition
This is the cool part. You only have to do this once, and it works across every page. Here’s what to do:
Head to the Pages panel and select your Home page.
Make sure you’re on the primary desktop breakpoint.
On the right side, scroll to the Effects section and click the “+”.
Choose All Pages (not a single page, you want this applied site-wide).
You’re now editing a global page transition. Let’s make it buttery smooth.
Global transition.
Global transition.
Global transition.
Animate the page exit
Let’s start with the exit effect, what happens when you leave the current page. Here’s how:
Select This Page under the transition settings.
Set Offset Y to –30%. This pushes all your content up and off the screen.
Enable Mask, set it to Wipe, and rotate it to 270°. That makes it wipe from bottom to top. Already looking good, right?
Make it feel smooth
To really sell the effect, we need to tweak the timing:
Set the duration to 0.6s (longer transitions = smoother feel).
Adjust the easing curve to something soft and natural.
Once you like it, copy those settings, you’ll need them for the entrance effect too.
You can preview it as you go and dial it in until it feels just right.
Animate the page entrance
Now let’s handle how the next page comes in.
Set Offset Y to +30% (this makes it come up from the bottom).
Use the same Wipe mask at 270°.
Paste the same easing curve and duration from before.
Add a delay, something like 0.5s works great.
The delay gives the previous page time to exit before the new one slides in. You can adjust it depending on how much overlap (or black screen) you want between pages.
Pro tip: The less delay, the snappier the transition. More delay = more cinematic. Up to you.
Fix the wipe color
Now, here’s a little gotcha… In the preview, you might see a weird gray color during the wipe. But on the live site? It turns white. Confusing, I know.
Here’s why:
The background color of your breakpoint is what shows up during the transition. Not the color of your section or content frame. To fix it:
Go to each page, click the breakpoint, and set the background fill to your desired transition color (black is a solid choice).
Make sure your content frames aren’t covering it up with their own fill color.
Once that’s done, publish your site, and the transitions will look just like they do in preview. No random gray or white flashes.
Wrapping up
That’s it. Really. With just one quick setup, your entire Framer site now has smooth, wipe-style transitions that look ultra-polished. If you’d like to go deeper into the rabbit hole, I’ve got this in-depth tutorial on smooth transitions you can check out.
No code. No stress. And no repeating the same steps for every page. It’s a small touch, but it seriously levels up the feel of your site.
Animate the page exit
Let’s start with the exit effect, what happens when you leave the current page. Here’s how:
Select This Page under the transition settings.
Set Offset Y to –30%. This pushes all your content up and off the screen.
Enable Mask, set it to Wipe, and rotate it to 270°. That makes it wipe from bottom to top. Already looking good, right?
Make it feel smooth
To really sell the effect, we need to tweak the timing:
Set the duration to 0.6s (longer transitions = smoother feel).
Adjust the easing curve to something soft and natural.
Once you like it, copy those settings, you’ll need them for the entrance effect too.
You can preview it as you go and dial it in until it feels just right.
Animate the page entrance
Now let’s handle how the next page comes in.
Set Offset Y to +30% (this makes it come up from the bottom).
Use the same Wipe mask at 270°.
Paste the same easing curve and duration from before.
Add a delay, something like 0.5s works great.
The delay gives the previous page time to exit before the new one slides in. You can adjust it depending on how much overlap (or black screen) you want between pages.
Pro tip: The less delay, the snappier the transition. More delay = more cinematic. Up to you.
Fix the wipe color
Now, here’s a little gotcha… In the preview, you might see a weird gray color during the wipe. But on the live site? It turns white. Confusing, I know.
Here’s why:
The background color of your breakpoint is what shows up during the transition. Not the color of your section or content frame. To fix it:
Go to each page, click the breakpoint, and set the background fill to your desired transition color (black is a solid choice).
Make sure your content frames aren’t covering it up with their own fill color.
Once that’s done, publish your site, and the transitions will look just like they do in preview. No random gray or white flashes.
Wrapping up
That’s it. Really. With just one quick setup, your entire Framer site now has smooth, wipe-style transitions that look ultra-polished. If you’d like to go deeper into the rabbit hole, I’ve got this in-depth tutorial on smooth transitions you can check out.
No code. No stress. And no repeating the same steps for every page. It’s a small touch, but it seriously levels up the feel of your site.
Animate the page exit
Let’s start with the exit effect, what happens when you leave the current page. Here’s how:
Select This Page under the transition settings.
Set Offset Y to –30%. This pushes all your content up and off the screen.
Enable Mask, set it to Wipe, and rotate it to 270°. That makes it wipe from bottom to top. Already looking good, right?
Make it feel smooth
To really sell the effect, we need to tweak the timing:
Set the duration to 0.6s (longer transitions = smoother feel).
Adjust the easing curve to something soft and natural.
Once you like it, copy those settings, you’ll need them for the entrance effect too.
You can preview it as you go and dial it in until it feels just right.
Animate the page entrance
Now let’s handle how the next page comes in.
Set Offset Y to +30% (this makes it come up from the bottom).
Use the same Wipe mask at 270°.
Paste the same easing curve and duration from before.
Add a delay, something like 0.5s works great.
The delay gives the previous page time to exit before the new one slides in. You can adjust it depending on how much overlap (or black screen) you want between pages.
Pro tip: The less delay, the snappier the transition. More delay = more cinematic. Up to you.
Fix the wipe color
Now, here’s a little gotcha… In the preview, you might see a weird gray color during the wipe. But on the live site? It turns white. Confusing, I know.
Here’s why:
The background color of your breakpoint is what shows up during the transition. Not the color of your section or content frame. To fix it:
Go to each page, click the breakpoint, and set the background fill to your desired transition color (black is a solid choice).
Make sure your content frames aren’t covering it up with their own fill color.
Once that’s done, publish your site, and the transitions will look just like they do in preview. No random gray or white flashes.
Wrapping up
That’s it. Really. With just one quick setup, your entire Framer site now has smooth, wipe-style transitions that look ultra-polished. If you’d like to go deeper into the rabbit hole, I’ve got this in-depth tutorial on smooth transitions you can check out.
No code. No stress. And no repeating the same steps for every page. It’s a small touch, but it seriously levels up the feel of your site.
