Extra-wide 2XL breakpoint – 2xl: is targeting 1536px and above
Default line-heights per font-size – now every font-size has its own line-height specified by default
Extended spacing, typography, and opacity scales – now you can be more specific when defining margin, padding, font-size, or opacity
@apply – @apply now works with anything, hover: did not work in the previous version
Group-hover and focus-within are now enabled by default. This is useful if you want to highlight a whole container if a button inside of it is in focus, or change the text color of all children if you hover over a parent div container.
// install via npm or yarn
npm install @barba/core @barba/css
yarn add @barba/core @barba/css
// Include Barba and Barba CSS in your project
import barba from '@barba/core';
import barbaCss from '@barba/css';
// Tell Barba to use the CSS plugin
// Initiate Barba
<!-- content that stays the same on all pages - eg. header -->
<!-- content that will change from page to page -->
<!-- content that stays the same on all pages - eg. footer -->
Barba.js will now add and remove specific CSS classes from the data-barba="container".
These CSS classes will be based on the transitions that we need to specify.
If you are completely new to Barba.js, you can check this tutorial to learn more about the required HTML markup.
How to create fade-in transition on page load
To create a simple fade in transition on page load we can use the once hook.
Barba.js will add and remove the following CSS classes .barba-once, .barba-once-active and .barba-once-to during the transition.
.barba-once and .barba-once-active will be applied at the start of the transition.
.barba-once-active and .barba-once-to will be applied during the transition.
This hook is called once, because this transition only runs once on the page load.
When the CSS transition is completed, all CSS classes will be removed from the container.
How long these classes stay on the container depends on the duration of the CSS transition or animation.
Because the CSS plugin overrides the main once hook, any code inside of once will be ignored. The same applies to the enter and leave hooks.
console.log('this will be ignored');
console.log('shows up BEFORE once transition');
console.log('shows up AFTER once transition');
If you need to run any code related to the once transition use beforeOnce or afterOnce hooks.
How to customize the name of the CSS class?
You can customize the CSS classes by specifying a name for your transition.
If you specify home as the name, Barba will generate these classes:
The format of the class is always the same: .[name]-[hook]-[state].
How to create CSS transition between two pages
Every page transition has two phases.
Firstly the current page leaves, then the next page enters.
To use CSS transitions between two pages, we need to specify the hooks inside of the Barba transition, even if there is no code inside of them.
Starting to build your first parallax scrolling website? Not really sure what you are getting into? Don’t make the same mistakes that I have made and learn from these 24 tips. Or at least read the #11.
Have you ever created a parallax scrolling website and wanted to make it responsive but didn’t know how? Is your page working beautifully on desktops but is completely unusable on mobile and tablet devices?
Here is a step by step guide how you can turn parallax scrolling off for mobile and touch devices using enquire.js.