Page Transitions

Advanced Features

Monogram uses Barba.js v2.10.3 to deliver SPA-style page transitions. When a visitor clicks a link, the new page loads in the background while a smooth fade animation plays - no full browser refresh required. The result is a fast, app-like browsing experience.

#How It Works

The visitor clicks a link.
The current page fades out while the new page content loads in the background.
Once loaded, the new page fades in.
All theme features (animations, lazy loading, parallax, Elementor widgets) reinitialize automatically on the new page.

The entire process feels seamless. Visitors stay immersed in your site without the white-flash interruption of a traditional page load.

#Settings

Navigate to Appearance > Customize > Page Transitions to configure the feature.

#General Tab

Setting	Type	Default	Description
Enable Page Transitions	Toggle	On	Master switch for SPA navigation. When disabled, the site uses standard browser navigation.
Transition Timeout	Slider (1000-15000 ms)	7000 ms	Maximum time Barba waits for a transition to finish before falling back to a normal page load.

#Loader Tab

Setting	Type	Default	Description
Enable Page Loader	Toggle	On	Show a full-page loader overlay during transitions to mask loading time.
Loader Fade Duration	Slider (0.1-1.5 s)	0.4 s	Duration of the fade-in and fade-out animation for both the current and incoming page.

#Integrations Tab

Setting	Type	Default	Description
Close Boxzilla Popups	Toggle	On	Automatically closes any active Boxzilla popups before navigating to a new page, preventing orphaned modals.
Reset Scroll Position	Toggle	On	Scrolls to the top of the page after each transition. Works with both native scroll and Smooth Scroll.
Reinitialize Elementor	Toggle	On	Re-triggers Elementor frontend scripts after each transition so all widgets and effects continue working.

#Requirements for Elementor pages

Page transitions swap the page content in place and carry the new page's Elementor CSS file across with it. Two settings on your site have to leave that file alone, and both sit outside the theme.

Elementor CSS print method must stay on External file, at ElementorSettingsPerformance. On Internal embedding the CSS is printed as a style block inside the page, and a style block travels with the page it belongs to. The new page then arrives with its own set while the previous set is still in the document, and you see a mixture of the two until a full browser reload.
CSS optimization in a caching plugin must be off for the per-page file. Combine CSS, remove unused CSS, critical CSS, and guest or generic-copy modes merge, rename or strip that file, so there is nothing left to carry across.

The symptom for both is the same: a page that looks broken until you hard refresh it. If you hit that, check these two before anything else, then clear the cache and run Elementor > Tools > Regenerate CSS & Data.

Elementor settings to configure onceOnly relevant if you run Elementor on a theme that supports it. One pass through these settings and you can forget about them. Building a good homepage Each item below comes with its reason....Configuration

#Developer Hooks

If you run third-party scripts (analytics pixels, chat widgets, ad trackers, custom integrations) that need to react to navigation, the theme exposes a small JavaScript event API and a PHP filter so you do not have to fork the theme.

#JavaScript Lifecycle Events

The transition fires five named events in this order:

Event	When It Fires
`beforeLeave`	Old page still in DOM, scripts still bound
`afterLeave`	Old page container removed
`beforeEnter`	New page injected, runtime classes applied
`beforeReinit`	Just before theme features reinitialize on the new page
`afterEnter`	Reinit done, page fully ready

A one-shot ready event fires once on the very first page load.

Subscribe via the registry API:

window.jkdSPA?.on('afterEnter', ({ to, from }) => {
    window.gtag?.('event', 'page_view', { page_path: to.url.path });
    window.fbq?.('track', 'PageView');
});

window.jkdSPA?.on('beforeLeave', () => {
    window.MyChatWidget?.disconnect?.();
});

Or via standard addEventListener - the same events are dispatched on window with a jkd:spa: prefix:

window.addEventListener('jkd:spa:afterEnter', (e) => {
    console.log('navigated to', e.detail.to.url);
});

jkdSPA.on() returns an unsubscribe function. Call it to detach the listener.

#Skipping Elementor Reinit on Specific Elements

Some widgets - heavy 3D scenes, embedded video players, anything with persistent state - should not re-run their ready trigger after each transition. Tag the element with the no-spa-reinit CSS class in Elementor > Advanced > CSS Classes, or register your own opt-out class via PHP:

add_filter('jkd_spa_skip_scripts', function ($classes) {
    $classes[] = 'my-persistent-widget';
    return $classes;
});

Any .elementor-element matching one of those selectors (or sitting inside one) is skipped during reinit.

Certain link types bypass Barba and trigger a normal browser load:

Direct image links - JPG, PNG, GIF, WebP, AVIF, SVG, and other image file URLs
Lightbox links - Elementor lightbox, GLightbox, and WordPress native gallery links
WordPress admin bar - all admin bar links use standard navigation

This ensures that lightboxes, downloads, and admin actions work as expected.

#Safety Timeout

If a transition gets stuck (for example, due to a slow server response), a safety mechanism kicks in after the configured timeout plus 2 seconds. It automatically resets the transition state, hides the loader, and restores normal click behavior so visitors are never left on a frozen page.

#Testing

You can temporarily disable page transitions by adding ?barba_enabled=false to any URL on your site. This is useful for debugging layout issues or testing how the site behaves without SPA navigation.

If a page renders correctly with that parameter and incorrectly when you click through to it normally, the cause is the CSS setup covered under requirements above, not the page itself.

Tip: Page transitions handle reinitialization of Elementor, AddToAny sharing buttons, Contact Form 7, and the WordPress admin bar automatically. For anything else, hook into the developer events above.

Last updated 10 Sep 2026

Was this article helpful?

Resources

On this page