Animate the departure
Pick your page wrapper, choose the Page Exit trigger, and shape the exit animation. It finishes, then the browser navigates.
Motion.page · Visual animation builder
Page transitions, without the rebuild.
The polished fade between pages you see on premium sites, added to the site you already have. Exits play before the browser navigates and entrances greet every arrival, all wired to your real links in a visual editor, with no single-page rewrite and no router required. Try the simulator below.
Cascade House
Arrive slowly.
Eleven rooms above the falls.
click a link inside · exit plays, then the browser moves onSimulated in one document. A real site performs two full page loads between these timelines, wired to your real links by the Builder.
The product
Watch it actually work.
Meet Motion.page: All-in-One platform for web animation · YouTube
Inside the Builder
A transition is just two timelines.
An exit on Page Exit and an entrance on Page Load: two ordinary timelines on your page wrapper. The browser still performs the navigation itself.
Animate the arrival
A second timeline on Page Load opens every visit: before the DOM settles, during, or after everything has loaded.
Pick your links and publish
All links, only specific ones, or everything except a list you exclude, then publish clean code to your site.
Works with every platform you already use
Link selection
All links, some links, or all but these.
Watch every menu link, only the ones you point at (your portfolio cards, your nav), or everything except a list you exclude, like a booking form. Links added later are checked live at click time, so they behave correctly too.
The published pattern: in the Builder, these are two panels. Motion SDK, Builder v3.2.10:
Motion("enter", ".page-wrapper", {
from: { opacity: 0, y: 30 },
duration: 0.6,
ease: "power3.out",
}).onPageLoad();
Motion("exit", ".page-wrapper", {
to: { opacity: 0, y: -30 },
duration: 0.4,
ease: "power2.in",
}).onPageExit({ skipHref: ["anchor", "mailto"] });
The same exit and entrance you just watched attach to your own navigation with two triggers in the Builder.
Browser manners
Cmd-click, back button, downloads, untouched.
Intercepting navigation is easy to do badly. The exit trigger is deliberately picky about which clicks it touches, and leaves everything else to the browser.
- Modifier clicks pass through
- Ctrl, Cmd, Shift, and Alt clicks, middle clicks, and right clicks are never intercepted. Open-in-new-tab works exactly as your visitors expect.
- New tabs and downloads too
- Links with a target other than _self and links with a download attribute navigate untouched. Only eligible, same-tab link clicks play the exit.
- The back button is never delayed
- Browser history navigation is never intercepted. Back and forward stay instant, the way users expect them to be.
- Late links still work
- Menus your page builder or plugins render after load still animate. A delegated listener catches them with nothing to re-initialize.
- Zero dependencies, shipped on demand
- The page-exit module is part of Motion.page's own engine and is only bundled into your site's code when a timeline actually uses it.
What is a page transition?
A page transition is an animation that plays when a visitor navigates between pages: the current page animates out, and the next page animates in. Instead of content simply vanishing and reappearing, the site exits and enters like a scene change: the common patterns are the fade, the slide, the wipe, and the cover-and-reveal, and all of them are just different exit and entrance timelines.
On a normal multi-page website this takes two timelines. An exit timeline intercepts an eligible link click, plays, and then lets the browser navigate to the real URL. An entrance timeline on the next page plays on load, completing the loop.
Motion.page builds both visually: the exit is the Page Exit trigger with link selection and exclusions, the entrance is the Page Load trigger with before, during, or after-load timing. Published code runs on the site itself with zero dependencies.
Questions about page transitions.
Do I need a single-page app or a router?
No. That's the point. Page transitions run on regular multi-page websites: the exit animation plays, then the browser performs a normal navigation to the next page, where a Page Load timeline greets the visitor.
Which clicks play the exit animation?
Eligible link clicks: same-tab links with a real destination. Modifier-key clicks, middle clicks, new-tab links, downloads, and (optionally) anchors, mailto and javascript links are left alone. You can also limit the trigger to specific selectors or exclude classes.
Why not just intercept clicks with my own script?
You can, but a hand-written click interceptor has to get several details right: leaving modifier-key, middle, and right clicks alone, skipping links with a target other than _self or a download attribute, never touching the back button, and catching links your page builder adds after load. Motion.page's Page Exit trigger already handles all of that. A delegated listener catches late-added links too, with nothing to re-initialize.
What about the browser back button?
Back and forward are never intercepted or delayed. Exit animations only play on link clicks. Browsers that restore a page from the back-forward cache show it exactly as it was left.
Is there a flash between pages?
A real navigation loads a new document, so the browser paints the next page fresh. There is no shared DOM or crossfade. Matching background colors between pages and running the entrance before the DOM settles keeps the hand-off feeling seamless.
What if my site already uses a router or View Transitions?
The exit trigger yields to earlier listeners that handle a click, and you can scope it with Specific Links or exclusions so router-managed links are left alone. On fully client-routed sites, use Page Load entrances rather than exit interception.
Does it respect reduced motion?
Yes. Code published from WordPress is wrapped in a prefers-reduced-motion guard by default, with a per-timeline bypass switch in the Builder when a timeline must always run.
Does it work in WordPress and Desktop?
Yes. Page Exit and Page Load triggers ship in both the Motion.page WordPress plugin and the Desktop app, with the same controls, and they work on pages built with Elementor, Bricks, Divi, or Gutenberg.
What happens to my animations if I cancel?
Timelines published as local code live in your own site and keep running; they don't phone home. CDN-hosted delivery (where we host and serve the animation file for you) and further editing require an active license.
Still deciding? Try free for 7 days →
Pick your creative weapon.
Animations, shaders, or both. Flat pricing, no per-seat math.
Includes Page Transitions
Visual animation builder
Builder
Unlimited projects
Unlimited WordPress sites
Unlimited desktop projects
CDN and local code
All Builder features
€149/ year
That's just €12.42/mo · save 50%
WebGPU shader editor
Canvas
WebGPU-based shader editor
Unlimited canvases
Publish with CDN
Export to code, image or video
All Canvas features
€149/ year
That's just €12.42/mo · save 50%
Builder + Canvas combined
Bundle
Everything in Builder
Everything in Canvas
Priority support
Best value
Page Transitions
Give every page a proper entrance.
Instant access, in Motion.page for WordPress and Desktop. Animations published as local code keep running on your site, even if you cancel.