Frequently Asked Questions when starting using BarbaJS.
- Why Barba reload the page on same url?
- How to prevent transitions to break?
- Can we play leave/enter transitions at the same time?
- How to play a specific transition?
- How to manage/reset scroll position after a transition?
- Where can I easily init/destroy a third party plugin?
- How can I preload some images before loading the next page?
- How can I get the current/next page informations?
- What about SEO concerns?
Missing a question? Search into the repository issues first before creating a new one. If you need further help or instant code support, join the community using the developer link. Finally, don’t hesitate to ask the Barba team on Slack if you want a question to be present on this page.
This is the intended behavior. When a page take time to load and reach the request timeout, it will reload instead of doing “nothing”, which can be very frustrating for most users. Use a
prevent strategy to change this behavior.
When a transition is running and the user click on an eligible link, you can choose whether the library break the running one or prevent the user click event to let the transition finish. Take a look at the
Yes of course! The
enter transitions can be “concurrent” and run together at the same time, like a “crossfade” transition. You can enable this per-transition using the sync mode.
When building an interactive website with Barba, you will probably need to build specific transition between specific pages. This can be achieve using single or multiple transition rules based on custom/route/namespace conditions.
As the browser never “hard reload” the current tab when using Barba, you will need to reset the scroll position before entering a new page in order for the user to start at the top. This can easily be done using a global
hook. Take a look at the scroll position recipe for more tips.
You can initialize, refresh or destroy a third party plugin/script inside
Views: according to the
namespace, the associated view will be automatically called when entering or leaving the page. Get started working with views by reading the run custom code section.
Barba doesn’t implement any mechanism to preload assets from the next page: you need to manage it by yourself. There is a lot of library on the net that allow you to preload/prefetch images and much more. You can take a look at the Petr Tichy repository that implement the
The current/next page informations are passed to all hooks, through the
data argument. Note that according to the lifecycle, rules, sync mode or cache availability, some properties may be
Barba care about automatically updating the document
title when navigating between your pages, mainly to keep a good user experience and know on which page you are. When your website is crawled by search engines or bots, the correct metadata will be loaded. Knowing this, there is no need to update your page metadata keywords/description.