Git Product home page Git Product logo

barba-page-transition-example's Introduction

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.

barba-page-transition-example's People

Contributors

karanmhatre1 avatar thierrymichel avatar xavierfoucrier avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.