Someone installs your WordPress site as a PWA, opens it from the home screen, and taps from the home page into a product, then into a guide, then back again. Every tap flashes white. The layout pops in late. For half a second the app feels like a slow website trapped inside an icon, not a product that belongs on the home screen.
Native apps rarely throw a blank frame between screens. Progressify ships smooth page transitions so your WordPress PWA can fade or slide between pages instead of painting a white flash. Where the browser cannot support the effect, navigation falls back to a normal load. You do not rewrite the theme to get there.
Progressify is the DaftPlug PWA plugin. This post is only about smooth page transitions: fade, slide, or off, with no white flash between pages when the effect can run. Not the bottom tab bar, not dark mode, not idle detection, not push notifications, not offline caching, not install prompts, not Android or iOS store builds, not pull to refresh, not wake lock, not haptics, not skeletons, not toasts. Those live elsewhere. For adjacent app-like awareness (idle detection), keep WordPress PWA idle detection for user inactivity nearby.
What Progressify actually ships here
Stay inside the real feature set:
- Smooth page transitions as a Progressify capability for the installed / app-like experience
- Transition style choices that include fade, slide, or off
- Navigation that aims to avoid a white flash between pages when the transition can run
- A fallback to normal page load where the effect is unsupported
- Theme-agnostic layering: Progressify sits over the themes and plugins you already run
- A settings-level control you enable from Progressify rather than inventing CSS view transitions in the theme
This post does not invent undocumented transition durations, custom cubic-bezier curves, View Transitions API microcopy, or claims that every browser paints the same animation. The product promise is smooth page transitions (fade, slide, or off), no white flash when supported, and a normal load elsewhere. Your theme still owns layout. Progressify owns the transition layer for the PWA experience.
Why smooth transitions matter on a WordPress PWA
Installed apps inherit motion expectations. When someone adds your site to the home screen, they stop thinking “another tab” and start thinking “app.” Apps that flash white between screens feel unfinished. A short fade or slide is not decoration. It is continuity.
Standalone removes the browser’s soft cover. In a normal tab, browser chrome and the previous paint can mask a hard reload. In standalone PWA mode the chrome is gone. A full white paint between URLs is impossible to ignore. Transitions paper over that gap without asking you to rebuild navigation in React.
Multi-page WordPress remains multi-page. Most WordPress sites are not single-page apps. They load real URLs. Smooth transitions let those URLs feel connected instead of forcing you into a custom router you do not want to maintain.
It completes the app-like story without mixing features. Progressify groups transitions with other interface tools. This post is only motion between pages. Treat the tab bar as wayfinding, dark mode as color, idle detection as session awareness, and leave them alone during this pass.
You avoid fragile theme CSS. Hand-rolled transition scripts fight page builders, break when caching strips inline CSS, and fail differently per theme update. Progressify’s transition control is meant to live in the PWA stack instead of another snippet in header.php.
How to enable smooth page transitions in wp-admin
Assume Progressify is installed, HTTPS works, and the PWA already installs (manifest, icons, service worker, display mode).
1. Confirm you are testing the app-like experience
Transitions matter most after install, when the site launches without browser chrome. Smoke-test Add to Home Screen on a phone before you obsess over desktop DevTools. You can still enable the feature in a browser tab, but the real UX win shows up on a device people treat as an app.
2. Open Progressify and find smooth page transitions
In wp-admin, open Progressify settings and find the smooth page transitions control (or the app-like / navigation area where Progressify exposes it). Choose fade, slide, or leave it off while you baseline. Prefer one style site-wide for this pass. Mixing styles per template is a later experiment, not day one.
Do not turn on tab bar, dark mode, idle detection, pull to refresh, and transitions in the same panicked pass. Ship transitions first. Add chrome after navigation already feels continuous.
3. Pick fade or slide on purpose
Fade is usually the safer default. It softens the white flash without implying a directional stack. Slide can feel more “app-like” on product and content hubs where people expect forward and back motion. Off is the control you want when a third-party builder or custom router already animates routes and you need Progressify to stay out of the way.
Start with fade on a content-heavy site. Try slide on a catalog or membership library if the team wants a clearer sense of place. Document the choice so the next designer does not flip it casually.
4. Verify the fallback path
Progressify falls back to a normal load where the transition is unsupported. That is a feature, not a bug. Open the same path on an older browser or a locked-down WebView and confirm the page still loads cleanly without a broken half-animation. Do not market “every device gets a cinema transition.” Market “supported clients get fade or slide; everyone else gets a normal load.”
5. Test on a real phone you hold
- Install the PWA and open a typical deep page (article, product, account).
- Navigate three hops forward and one hop back.
- Watch for white flashes between paints.
- Confirm fade or slide completes without stuttering the next interaction.
- Open a heavy page (large gallery, shop archive) and confirm the transition does not mask a genuinely slow server response as “smooth.”
- Disable the transition briefly (set to off), reload, and confirm you can tell the difference. If you cannot tell, something else is already covering navigation and you should leave Progressify off until you understand who owns motion.
If a page builder also injects route animations, disable or reconcile it. Two transition systems fighting each other create flicker and double fades.
6. Keep sensitive flows honest
Login, checkout, and account screens should be in your first test set. Transitions are cosmetic continuity, not a security layer. Pair them with WordPress auth, HTTPS, and your existing session policies. Do not treat a pretty fade as a substitute for proper redirects after login.
What good looks like
- Installed PWA navigates with Progressify smooth page transitions set to fade or slide (or intentionally off).
- Supported clients avoid a white flash between pages during normal internal navigation.
- Unsupported clients still load pages normally without a stuck or half-applied animation.
- Tab bar, dark mode, idle detection, push, offline, install prompts, store builds, pull to refresh, wake lock, haptics, skeletons, and toasts were not required for this win.
- You did not invent undocumented duration APIs or claim Progressify implements every View Transitions platform detail.
- A teammate can install the app, tap three internal links, and describe the motion without squinting.
- Heavy pages still feel honest: a slow TTFB is not hidden behind a fake “instant” claim.
If DevTools looks perfect but a real device still flashes white because a full page cache miss or a redirect chain forces a hard paint, trust the device. Fix redirects and caching first, then re-check transitions.
Pitfalls (the ones that bite)
Treating transitions as a Core Web Vitals fix. Smooth motion is UX continuity. It does not replace caching, image work, or deferring render-blocking scripts. Measure performance separately.
Enabling slide everywhere on a marketing site that only has shallow paths. Slide implies depth. Fade is often enough for brochure pages.
Stacking Progressify transitions on top of a builder’s page transitions. Double animation looks broken. Pick one owner.
Testing only on desktop Chrome. Standalone on iOS and Android is where the white flash hurts. Validate there.
Blaming transitions for slow PHP. If every hop waits two seconds for the server, a fade cannot invent speed. Fix hosting and cache, then keep the transition as polish.
Bundling every app-like UI toggle. Turning on tab bar, dark mode, idle detection, and transitions together makes failures hard to attribute. Enable transitions, verify, then add the next piece.
Promising cinematic custom keyframes in marketing copy. Stay at product level: fade, slide, or off, no white flash when supported, normal load elsewhere.
Forgetting external links. Transitions are for your internal navigation story. External destinations and payment gateways will still leave the app shell. That is expected.
Practical checklist before you call it done
- Confirm the PWA installs and launches (ideally standalone) on a real phone.
- Enable Progressify smooth page transitions and choose fade or slide (or document why you left it off).
- Navigate at least five internal hops including home, a deep article or product, and an account-adjacent URL if you have one.
- Confirm supported clients avoid a white flash between pages.
- Confirm unsupported or locked-down clients still load normally.
- Reconcile or disable any page-builder route animation that duplicates the effect.
- Leave tab bar, dark mode, idle detection, push, offline, install prompts, store builds, pull to refresh, wake lock, haptics, skeletons, and toasts for separate passes if they are not already stable.
- Spot-check a heavy archive and a lightweight page so you know motion does not mask server slowness.
- Ask one teammate to install the app and describe navigation in one sentence.
- Re-test after the next theme or page-builder update. Inline animation scripts regress.
Takeaway
A WordPress PWA that installs cleanly still fails the app test if every tap paints a blank frame. People expect continuity between screens. Native apps deliver it. Your installed site can too. The fix is not a custom router in the theme. It is Progressify smooth page transitions: fade or slide when supported, normal load when not, without rewriting templates.
Progressify adds smooth page transitions alongside the rest of the app-like interface family, without asking you to rebuild navigation or ship a single-page app. Pick one style. Test on a phone you actually hold. Keep other UI features as separate enablement work.
One Pro membership unlocks Progressify plus Lightify, Generatify, Rankify, and Snapshotify. New Pro plugins join existing memberships. Plans differ by site count only (Pro $37.99 for 1 site, Pro Plus $74.99 for 5, Pro Max $138.99 for 100), with a 14-day money-back guarantee. See pricing when the installed app should feel continuous between pages instead of flashing white on every tap.
Enable smooth page transitions. Install once. When navigation stops looking like a hard reload trapped in an icon, the PWA finally feels like it belongs on the home screen.