Design Cart Pajax

Design Cart Pajax is a WordPress plugin that adds animated page transitions and optional PJAX navigation to make website browsing feel smoother, more distinctive, and more visually engaging.

Instead of using the standard page-to-page reload experience, the plugin introduces six different transition styles inspired by Codrops concepts and adapted for WordPress.

Features

• 6 animated page transitions:

  • Cielrose

  • Faint

  • MorphSVG

  • Bloom

  • Truus

  • Leandra

• Optional PJAX navigation

• Adjustable animation speed from 25% to 200%

• Custom transition background color

• Custom Bloom text color

• Custom transition text for the Bloom effect

• Live transition preview in the WordPress admin panel

• Automatic fallback to standard navigation when PJAX is not suitable

• WooCommerce-safe navigation for cart, checkout, and account pages

• Custom path exclusions

• data-no-pjax support for individual links

• Support for prefers-reduced-motion

• Developer events and PHP filter for custom integrations

Why Design Cart Pajax?

Many WordPress websites look completely different visually but still behave the same way when users move between pages.

A click is followed by a traditional browser reload, a short flash or pause, and then the next page appears.

Design Cart Pajax turns that moment into part of the website's design.

Animated transitions can help make navigation feel more polished and can add another layer of visual identity to a custom WordPress project.

The plugin does not force PJAX everywhere. Pages containing forms, dynamic components, page-specific scripts, WooCommerce checkout functionality or other elements that require a full reload can automatically fall back to standard navigation.

This approach keeps the visual experience flexible without sacrificing compatibility.

Available transitions

01. Cielrose

The current page scales down while the next page is revealed and enlarged into view.

02. Faint

A WebGL-based transition powered by Three.js and a custom noise shader.

03. MorphSVG

A fluid transition based on animated SVG path morphing.

04. Bloom

A horizontal overlay expands across the viewport and can display custom animated text.

05. Truus

A large animated SVG spiral is drawn across the screen and expands to cover the transition.

06. Leandra

The next page is revealed using an animated polygonal mask.

PJAX navigation

Compatible internal pages can be loaded without a complete browser refresh.

The plugin updates important document information including:

• page title,

• meta description,

• robots meta tags,

• Open Graph metadata,

• Twitter metadata,

• canonical URLs,

• alternate hreflang links,

• body classes,

• document language,

• WordPress menu state.

When PJAX is not suitable, Design Cart Pajax automatically falls back to normal page navigation.

Compatibility

Design Cart Pajax avoids PJAX for situations where a full reload is safer or required.

This includes, among others:

• forms,

• iframes,

• video and audio,

• canvas elements,

• page-specific scripts,

• Elementor components,

• WordPress interactive components,

• WooCommerce cart,

• WooCommerce checkout,

• WooCommerce customer account pages.

You can also manually exclude selected paths or individual links.

Requirements

• WordPress 6.2 or newer

• PHP 7.4 or newer

• Modern browser

• WebGL2 support for the Faint transition

Technology

The plugin uses locally bundled libraries and does not depend on a CDN.

Main technologies include:

• GSAP

• SplitText

• MorphSVGPlugin

• DrawSVGPlugin

• CustomEase

• Three.js

• SVG

• WebGL

• Fetch API

• History API

Developer integration

Design Cart Pajax provides JavaScript events:

dcpajax:before

and:

dcpajax:after

as well as the PHP filter:

design_cart_pajax_allowed

These can be used to integrate custom scripts or selectively disable PJAX.

Project page

Full plugin description, documentation and usage examples are available on the Design Cart Pajax project page .

Author

Design Cart Pajax was developed by Paweł Nosko from Design Cart.

The plugin combines animated page transitions with WordPress-specific navigation logic, compatibility checks and fallback mechanisms designed for real-world websites.