Swup is the best Barba.js alternative for most websites, especially if you want smooth page changes without turning your site into a full single page app. A small delay matters: 53% of mobile visits may be abandoned if a page takes longer than 3 seconds to load [source: Google]. So yes, pretty transitions are nice. But fast transitions are better.
TLDR: If Barba.js feels too fiddly, try Swup first. It is simple, friendly, and works well for content sites, portfolios, and landing pages. For example, a portfolio with 20 project pages can feel much faster if only the main content swaps while the header stays still. Use Taxi.js if you want more control, or Turbo if speed matters more than fancy animation.
Barba.js is popular for a reason. It lets you create soft page changes instead of harsh full reloads. But sometimes it can feel like building a tiny train system just to move one button. Honestly, it feels like you spend 30 minutes wiring hooks before the fun part even starts.
Here are five solid alternatives. Some are tiny. Some are more structured. All can help your website feel smoother.
1. Swup
Best for: portfolios, blogs, agency sites, and marketing pages.
Swup is the friendly option. It swaps page content with AJAX, then lets you animate between pages using CSS or JavaScript. The setup is clean. The docs are clear. You can get a basic fade working fast.
This is the one I would try first if Barba.js made you groan.
- Pros: easy setup, good plugins, strong community.
- Cons: complex sites still need careful planning.
- Use it when: you want pretty page changes without a huge rebuild.
A basic use case is simple. Your menu stays in place. The main content fades out. New content fades in. Nice. Clean. No drama.
2. Taxi.js
Best for: creative sites that need tight control.
Taxi.js is a page transition library made for developers who want more structure. It gives you “renderers” for different page types. That means your home page can animate one way, while your case study page does something else.
The catch is that you need to think more upfront. It is not hard, but it is less plug and play than Swup.
- Pros: flexible, modern, great for custom builds.
- Cons: more setup than beginner tools.
- Use it when: each page type needs its own feel.
Taxi.js is great for studios, galleries, fashion sites, and product stories. It gives you room to be playful.
3. Highway.js
Best for: developers who like a clean routing style.
Highway.js is another Barba-style tool. It helps handle page changes, transitions, and lifecycle events. You can create custom transitions and views. That gives you a tidy way to control what happens before, during, and after a page swap.
It feels a bit more old-school now, but it still has fans. The main annoyance is simple. You may spend extra time checking if it fits your current stack.
- Pros: clear concepts, custom transitions, good control.
- Cons: not always the first pick for newer projects.
- Use it when: you want a classic page transition setup.
4. Turbo
Best for: fast websites that need light transitions.
Turbo, from the Hotwire family, focuses on speed. It makes pages feel faster by replacing parts of a page instead of doing a full reload. It is not a wild animation tool by default. But you can pair it with CSS transitions and JavaScript events.
Turbo is a smart pick if you care more about quick page changes than dramatic motion. It is used a lot with Rails, but it can work outside Rails too.
- Pros: fast, practical, great for app-like sites.
- Cons: not built mainly for fancy visual effects.
- Use it when: your site has forms, dashboards, or content flows.
If your users click through many pages in one visit, Turbo can make the whole site feel snappier. Less waiting. Fewer blank screens. Better mood.
5. Pjax
Best for: simple AJAX page loading with custom animation.
Pjax is one of the classic tools in this space. It loads new HTML without a full page refresh. Then you decide how to animate the change. It is simple in concept. That is the charm.
Still, check the version and project activity before using it on a fresh build. Some Pjax packages are older than others. Expect to waste time on small edge cases if your site has lots of scripts, forms, or third-party widgets.
- Pros: simple idea, light feel, good for basic sites.
- Cons: package quality varies, setup can get messy.
- Use it when: you want a small tool and full control.
Which one should you choose?
Pick based on your site, not the trend.
- Choose Swup for the easiest Barba.js replacement.
- Choose Taxi.js for custom creative experiences.
- Choose Highway.js if you like its view and transition model.
- Choose Turbo for speed, forms, and app-like pages.
- Choose Pjax for a small, hands-on setup.
Quick tips before you add page transitions
Keep motion short. Around 200 to 500 milliseconds is usually enough. Longer transitions can feel cool once, then annoying forever.
Respect users who prefer reduced motion. CSS has prefers-reduced-motion for this. Use it. No one should feel dizzy because your page wants to spin like a game menu.
Also test your analytics, forms, scripts, and scroll position. Page transition tools can break small things in weird ways. A contact form that worked yesterday may stop after content swapping. Fun? Not really.
The simple answer: start with Swup. If you need more control, try Taxi.js. If your main goal is speed, use Turbo. Barba.js is still good, but it is not your only path to smooth movement and interactive web pages.
