Barba.js / Transitions and views

barba.js views app.js

const barba = require('@barba/core');
const anime = require('animejs');

const Home = require('./views/home');
const WhoWeAre = require('./views/whoweare');

class App {
    init() {
        barba.init({
            transitions: [{
                name: 'fade-transition',
                from: 'home',
                to: {
                    namespace: ['who-we-are']
                },
                leave: ({current}) => {
                    const animation = anime.timeline({
                        targets: current.container.querySelector('.m-hero__title'),
                        duration: 1000,
                        translateX: '-100%',
                    })
                    .add({
                        targets: current.container.querySelector('.m-hero'),
                        duration: 500,
                        opacity: [1, 0],
                    })
                    .add({
                        targets: current.container,
                        opacity: [1, 0]
                    });

                    return animation.finished;
                }
            }],
            views: [Home, WhoWeAre]
        });
    }
}

home.js

// ./views/home.js

class Home {
    constructor() {
        this.namespace = 'home';
    }

    beforeEnter(data) {
        // Init things
    }

    beforeLeave(data) {
        // Destroy things
    }
}

module.exports = new Home();