FAIR

Federated and Independent Repositories

Design Cart Pajax GPL

Plugin Banner

Design Cart Pajax GPL

by Paweł Nosko

Download
Description

Design Cart Pajax GPL adds animated transitions between WordPress pages. Choose one of six Codrops-inspired effects, set overlay and text colors, and optionally load compatible pages without a full reload.

Features

  • Six page transitions: Cielrose, Faint (WebGL), MorphSVG, Bloom, Truus, and Leandra
  • Overlay and text colors from the settings screen
  • Animation speed from 25% to 200% (100% matches the original timing)
  • Optional PJAX for compatible internal links
  • Preview of the selected transition in the admin screen
  • Automatic fallback to a normal page load for carts, checkouts, accounts, forms, and excluded paths
  • MIT-licensed anime.js and Three.js (no GSAP)

WooCommerce cart, checkout, and account pages keep regular navigation. Links marked with data-no-pjax, downloads, anchors on the same page, and the browser Back/Forward buttons also use a full load.

Integration

  • dcpajax:before on document (cancelable): detail.url, detail.current, detail.next. Call preventDefault() to force a full navigation.
  • dcpajax:after on document: fired after content replacement, with detail.url and detail.container.
  • PHP filter design_cart_pajax_gpl_allowed: return false to disable PJAX for a page.

Reduced-motion system settings disable animations and link capture. The Faint effect requires WebGL2; without it the plugin uses a normal page load.

Credits

Transition design by Iqbal Muthahhary (Codrops). WordPress integration by Paweł Nosko / Design Cart. Third-party notices are in third-party.txt.

  1. Upload the design-cart-pajax-gpl folder to /wp-content/plugins/.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Open Settings Design Cart Pajax GPL and choose an effect.
Does every page use PJAX?

No. Pages that need a full reload, including forms and WooCommerce cart, checkout, and account screens, keep regular navigation. Overlay effects 02–05 still animate the transition, then load the destination normally.

Can I exclude specific URLs?

Yes. Add one path per line under Advanced settings. You can also add data-no-pjax to an individual link.

Are third-party libraries loaded from a CDN?

No. anime.js and Three.js are bundled with the plugin.

Where is the unminified source code?

Human-readable source for the compiled bundle lives in the src/ folder (src/transitions.js, src/anim.js, src/codrops-hooks.js, WebGL shaders in src/shader/*.js, and related files). assets/js/transitions.js is the built output. assets/js/arrival.js and assets/js/navigation.js are hand-written source files (not compiled). Third-party notices: third-party.txt.

To regenerate the bundle after editing src/:

  1. npm ci
  2. npm run build (esbuild via package.json; no separate build script file)

1.2.0

  • Replace GSAP with MIT-licensed anime.js while keeping Codrops timings and geometry.

1.1.3

  • Plugin Check fixes: license headers, WordPress.org readme, and coding-standard issues.

1.1.0

  • Six Codrops page transitions with local animation and Three.js assets.
Back to top