Skip to content

Instantly share code, notes, and snippets.

@marekalgoud

marekalgoud/finalinit.js

Created September 26, 2019 10:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marekalgoud/d3223b8fd10ca8fc27b0df0f2efaaf8a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marekalgoud/d3223b8fd10ca8fc27b0df0f2efaaf8a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marekalgoud created this gist Sep 26, 2019.
    51 changes: 51 additions & 0 deletions finalinit.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    import barba from '@barba/core'

    import animin from './anims/in'
    import animout from './anims/out'

    barba.hooks.before(() => {
    barba.wrapper.classList.add('is-animating')
    })
    barba.hooks.after(() => {
    barba.wrapper.classList.remove('is-animating')
    })

    barba.init({
    transitions: [
    {
    appear: () => {},
    leave: ({ current }) => {
    // launch your leave animation here on the current container
    return animout(current.container)
    },
    enter: ({ next }) => {
    // launch your enter animation here on the next container
    return animin(next.container)
    },
    beforeLeave: ({ current }) => {
    barba.wrapper.style.height = current.container.offsetHeight + 'px'
    },
    beforeEnter: ({ current, next }) => {
    barba.wrapper.style.height = next.container.offsetHeight + 'px'
    current.container.style.zIndex = -1
    next.container.style.zIndex = 1
    dynamicImportInit(next.namespace)
    },
    beforeAppear: ({ next }) => {
    dynamicImportInit(next.namespace)
    }
    }
    ]
    })

    const dynamicImportInit = (className) => {
    import(/* webpackChunkName: "[request]" */ `./pages/${className}`).then(module => {
    try {
    const DynamicClass = module.default
    const page = new DynamicClass()
    page.init()
    } catch (err) {
    console.error(err)
    }
    })
    }