Skip to content

Simple Example showing how to use Barba JS for page navigation

Notifications You must be signed in to change notification settings

barbajs/barba-page-transition-example

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Page transition example using Barba JS

alt text

"Create badass fluid and smooth transitions between your website’s pages." - Barba JS

You can find helpful documentation on their website.

This demo shows how to use Barba JS for page navigation. See the demo

I am using GSAP for basic animations on the page.

The sequence of the animation is:

  • Block the full screen with .loading-screen.
  • Remove .loading-screen.
  • Animate the new page content.

Understanding Supporting Functions

This code use async/await modern JavaScript pattern but, as mentionned in the documentation, you can use promises or this.async.

function pageTransitionIn() - This function shows the ".loading-screen", which is a fullpage screen used to transition between pages.

function pageTransitionOut() - This function hides the ".loading-screen" and call the content animation.

function contentAnimation() - All the content on the page starts with opacity: 0. This function animates on all on screen elements into visibility.


Barba Hooks

transitions: [{
  leave(data) {
    // Page transition in
    // Remove current content
  },

  enter(data) {
    // Page transition out
    // content animation
  },

  once(data) {
    // Content animation
  }
}]

These are barba js hooks.

once is called the first time the page is loaded. This time we want to simply animate all the content in place.

leave is called when you move out of one page to another. While moving out of the page, we want to hide everything with the loading screen, remove old content then play "enter".

enter is called when you enter a new page. As soon as we enter the page, show new content with animation.

About

Simple Example showing how to use Barba JS for page navigation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 52.9%
  • HTML 26.2%
  • JavaScript 20.9%