Page Effects (View Transitions)
In this Framer tutorial, you will learn Page Effects (View Transitions). We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
What types of page transitions are available?
Framer includes several built-in presets such as crossfade, wipe, circular mask, blinds, zigzag, and inset. Each preset controls how one page exits and the next enters, and every effect can be customized further through properties like direction, duration, and mask width to create unique transitions.
How do I control when and how a page effect is triggered?
Add page effects through the Effects panel and can be applied globally to all pages or targeted to specific pages. Use the “Target” option to define which pages the transition applies to and customize the enter and exit animations separately. Adjusting timing, easing, or masks lets you fine-tune exactly how the effect plays when navigation occurs.
Can I use multiple effects on the same page?
Yes, multiple page effects can be layered to create unique transitions between different page types. For example, a site can use a crossfade between general pages and a wipe effect for moving between blog posts. Each direction of navigation can have its own preset or custom mask.
Lesson details
Nov 23, 2023
6:17
