In the previous tutorial, we’ve covered how to create some cool page transitions using Barba.js and the CSS plugin. Today we will break down some the of terms associated with Barbas page transitions logic.

This will help you to trigger the right transition at the right time.

What you will learn:

• What is a namespace?
• How to set rules for transitions?
• How to use a custom condition for your transition?

View Demo →Download Files ↓

What is a namespace?

In simple terms, a namespace is the name of the page that you are leaving or entering.

It is defined on the data-barba="container".

<div class="wrapper" data-barba="container" data-barba-namespace="home">
    ...
</div>

This namespace is very useful if you want to define some rules for your page transitions.

When defining a transition in barba.init({...}) you can tell Barba to use this transition only if some conditions are met. More on conditions later.

There are many custom page transitions in the top award-winning websites.

The developers carefully consider which elements need to be animated out before the new page is animated.

In the CSS page transitions example, I have defined a different namespace for each page to be able to trigger different page transitions.

barba.init({
  transitions: [
    {
      name: 'home',
      to: { namespace: ['home'] },
      leave() {},
      enter() {},
    }, {
      name: 'fade',
      to: { namespace: ['fade'] },
      leave() {},
      enter() {},
    }
  ],
});

If we click on a link that takes us to fade.html, we play the fade transition. If we go to the index.html, the home transition will be used.

That’s how we have used namespace in the transition rule.

How to set rules for transitions?

To define the rules we can specify to, from, or both keywords.

The transition with both keywords will always take a priority, followed by to and from.

namespace is not the only condition that you can use.

To make the rules even more flexible you can also define custom or route if you are using Barba Router.

Think about rules as if this is true, use this transition.

{
    name: 'home',
    to: { namespace: ['home'] },
    leave() {},
    enter() {},
}, {
    name: 'clip',
    // to: { namespace: ['home'] }, // this would make it stronger
    from: { namespace: ['with-cover'] },
    leave() {},
    enter() {},
}

Above are two transitions, one with the rule “to home”, the other one with “from with-cover” namespace.

What if the user goes from with-cover to home? Which one would be used?

The home because to is stronger than from.

If we would add to: { namespace: ['home'] } to the clip transition it would become stronger and would be used instead.

How to use a custom condition for your transition?

Let’s say you have a special link on a page and you want it to trigger a special transition.

At the same time, you want any other link on that page to trigger a default transition.

You can use the custom condition like this:

{
    name: 'default',
    sync: true,
    from: { namespace: ['home'] },
    leave() {},
    enter() {},
},
{
    name: 'special',
    sync: true,
    from: {
        custom: ({trigger}) => {
            return trigger.text === 'Clip-Path Transition';
        },
        namespace: ['home']
    },
    leave() {},
    enter() {},
}

Any link on the home page would trigger a default transition, but clicking on Clip-Path Transition would trigger the special transition.

Do you see how powerful the rules are? That is how you can craft your page transitions based on many conditions.

custom is the strongest out of all conditions followed by route and namespace.

Barba applies a transition if all conditions are fulfilled.

For more details on the priorities of Barba.js transitions refer to the official documentation.

Do you want to learn even more about Barba.js? Join me in Barba 101 where we will cover Barba API in more detail. I hope to see you there.

Final Demo

View Demo →Download Files ↓

Related Resources

• How To Make Page Transitions in HTML – Barba.js and GSAP3 Tutorial
• Page Transitions Tutorial – Barba.js with CSS Plugin
• GreenSock 101 – Free Online Course
• Practical GreenSock – Premium Online Course

Conclusion

Mastering transition rules and knowing exactly which transition will be trigger when is the key.

Now you know how to use a namespace, set some rules, and use custom conditions for your page transitions.

I can’t wait to see how you will use it on your project.

Do you have any questions related to Barba.js or page transitions? Let me know in the comments.