Page Effects (View Transitions)

Introducing Page Effects in Framer, an exciting feature built on top of the Vue Transitions API, designed to allow you to create custom animations between pages. What sets this apart is that Framer is one of the very first tools offering this level of functionality.

The New Page Effects UI

We have worked on introducing an effects panel where you can add page effects to either all pages or to a single page. This became an essential realization when we noticed for larger sites, the same transition was often desired across all pages. So in the effects panel, you have the ability to target a specific page or animate between all pages.

Handy Presets and Custom Animations

Our new Page Effect UI is packed with a bunch of useful presets to choose from. Alongside these, there's a room to design custom exit animations of the current page and custom enter animations for whichever page you are navigating to, offering a broad spectrum of creativity.

And for those who have used Framer effects before, these panels would feel homey. We have incorporated a whole slew of properties that can be animated along with the provision to define custom transitions.

Transitioning With Elegance

The moment you add a page effect and give it a preview, a soothing shift in experience is observable. As you navigate between pages, each page doesn't just appear instantly but gently transitions into view. This creates a unique, elegant feel augmenting your website user journey.

Creating Unique Transitions with Page Effects

Our functionalities do not stop at just creating same transition effects for all pages. Imagine you wanted to add a distinctive transition when opening a blog post, Framer's page effects tool can help you achieve that with a few simple steps.

Target the blog pages from the CMS, add a new page effect, and choose a preset that suits your needs. For example, you could use the 'wipe left' preset and customize it using the mask property. This specialized control for page effects introduces a plethora of masking options you can use, giving more creative control over your web designs. All of these masks can be individuated enhancing the uniqueness of your transition effects.

Creating Customized Transition Paths

Creating reverse effects is as simple as creating the original effect. You could easily add another page effect pointing back to the blog index page from the blog pages. Likewise, you could also add crossfade effects when maneuvering back and forth pages other than the blog page.

Endless Possibilities With Framer

We offer a vast array of effects to experiment with; circular masking, blinds, zigzag masking, and inset are just a few to name. Each of these effects is highly customizable, extending endless possibilities for your web design journey. You also won't have to worry about browser compatibility, as these effects can adjust to being instant to ensure nothing looks out of line.