// Tech

Swup — Lightweight Page Transitions Alternative

Swup is a lighter alternative to Barba.js — same SPA-style transitions, smaller bundle, simpler API.

Swup (swup.js.org) is a page-transition library that competes with Barba.js. Smaller bundle (~12KB vs Barba's 25KB), simpler API, plugin system for animations. Same core benefit for 3D sites: WebGL canvas survives across pages, transitions are smooth. For most projects, Swup vs Barba is a matter of preference — both work well. I default to Swup for new projects (lighter) but maintain Barba on legacy projects rather than migrating. Plugin ecosystem is smaller than Barba's but covers the common use cases (GSAP transitions, scroll restoration, fragment plugin for partial page updates).

What you get hands-off

After delivery: the complete source handed over, commented code, and the asset pipeline documented. Hosting, SSL, nightly backups and maintenance can be part of the written offer if you need them.

// Need it on a live site? Three.js website development: 3D heroes, product viewers and scroll scenes from your models

What this delivers

Concrete output: a working swup page transitions integration on a real production site, not a demo. The integration includes device-tier detection so weak phones get a lighter version automatically. Source files are handed over in their original formats — Blender, GLSL, glTF — so any future developer can continue where I stopped.

How I work with it

On a typical project, swup page transitions ships as a self-contained module: one entry-point JS file, one CSS file, asset bundle below 1.5MB total. I keep the integration sandboxed so the rest of the site stays SEO-friendly classical HTML. Frame budget targets 60 FPS on a mid-range Android, with a measurable fallback below.

Performance budget

Lighthouse mobile target: 85+ across all categories. Before launch I run a mobile Lighthouse test and send you the result. Asset compression: glTF + Draco for meshes, KTX2 for textures, Brotli for shaders. Lazy-load any swup page transitions scene that isn't above the fold, with a first-paint target under 1.5s.

Frequently asked questions

Why pick this technology over alternatives?
It has the largest production-quality ecosystem, the most documentation, and the largest pool of developers who know it. For a site you want to maintain for 3+ years, ecosystem maturity matters more than feature peak.
What if a newer tool comes out next year?
I track new tooling and migrate when it makes sense, but only after the new tool ships stable production releases for at least 6-9 months. I don't rebuild client sites on bleeding-edge tools — that's the path to broken sites.
How long does this take?
It depends on scope. A simple site usually takes 1–2 weeks, larger projects take longer, and the exact timeline is in the written offer.
What does it cost?
Every project is quoted per scope — scene count, asset complexity and interactivity drive the effort. Send a short brief and you get a written fixed quote, with source code included.
What if my visitors are on weak phones?
The site detects device tier before the first scene loads and serves a lighter version on weak hardware (fewer particles, simpler shaders). Devices without WebGL get a static fallback that preserves the visual language and conversion path.

Ready to ship a 3D experience?

Tell me what you need — clear written scope, no surprises.

Call