Plainware Motion Pro
/Native, no code
Page transitions
/Where it lives · 01
Page transitions are a page effect. The ones that apply to every page live on the Home page, on its first breakpoint.
Step 01
Open the Home page
Select Home in the Pages panel and click its Desktop breakpoint, the first one. Effects for all pages can only live there.
Step 02
Add a page effect
In the right panel, scroll to Effects, click the plus and add a page effect. Presets such as Fade and Wipe are a starting point.
Step 03
Target All Pages
The Target menu starts on the current page. Switch it to All Pages so the transition runs on every navigation.
Step 04
Type the values
Copy the Enter and Exit values from a recipe below, then check it in Preview and publish.
/Recipes · 02
Exact values for the Enter and Exit fields. Offsets in px or %, durations in seconds, easing as a cubic bezier you can paste into the curve editor.
/Recipe 01
Live on this site
Fade
The quiet default. The new page fades in over the old one while the menu and footer stay put.
Target
All Pages
Enter opacity
0
Enter offset
X 0, Y 0
Enter scale
1
Transition
Tween, 0.35 s, delay 0
Easing
0.44, 0, 0.56, 1
Exit
None
/Recipe 02
Copy the values
Slide up
The new page rises 24 px while it fades in, and the old one fades out a little faster. Reads as moving forward.
Target
All Pages
Enter opacity
0
Enter offset
X 0, Y 24px
Enter transition
Tween, 0.45 s, delay 0.1 s
Enter easing
0.16, 1, 0.3, 1
Exit opacity
0
Exit transition
Tween, 0.2 s, 0.4, 0, 1, 1
/Recipe 03
Wipe mask
Curtain
The new page is wiped in from the bottom edge while the old one drifts up. The breakpoint fill is the color you see behind the move.
Target
All Pages
Enter mask
Wipe, angle 270°
Enter offset
X 0, Y 30%
Enter transition
Tween, 0.7 s, delay 0.1 s
Enter easing
0.77, 0, 0.18, 1
Exit offset
X 0, Y -30%
Exit transition
Tween, 0.7 s, 0.77, 0, 0.18, 1
/Good to know · 03
Four things that decide whether a transition feels finished or gets in the way.
The breakpoint fill shows during the move. Give every page the same fill, or the wipe flashes a second color. This kit uses Ink on the layout template.
Past about 0.6 s a transition starts to feel like waiting. The fade on this site is 0.35 s; the curtain, the slowest recipe, is 0.7 s.
Page effects are built on the browser View Transitions API. Where it is missing, pages switch instantly and nothing breaks.
A solid color panel that covers the screen and then lifts is not a native option. Recipe 03 gets close with a wipe mask and offsets, without any code.