Barba.js 101

It can be confusing getting started with Barba.js and this guide is meant to help clarify and explain how to set up page transitions for the novice/beginner. The guide is a git repo that you can clone/download to your machine and follow along by checking out a branch and running the code with a live server. I think seeing the code in use and being able to change it will help demonstrate how to use the great features of Barba.js.

I'm no expert in Barba so if you see something that is way off, errors or typo's, let me know and I will get those fixed. This guide is a result of my own learning and it is not meant to be anything remotely official or in-depth.

How to Use

You'll need to have node and npm installed on your system to make this work. There is plenty of documentation to help get this setup on your machine by searching for it. This guide will use GSAP also known as Greensock for doing the animations. You can also use CSS Animations. Look at the resources for more information and learning materials.

This guide is arranged with git branches, because that is how I put this together. You will need to understand how to checkout git branches. As you checkout each branch you can see the code in your editor to follow along.

1. Dowload or Clone from repo.
2. Run npm install in your terminal to install dependencies.
3. Run git checkout <branch-name> to go to the lesson, run git branch to see all branches.
4. Run npm run server to start the local dev server and open it up in your browser!