<template>
  <div class="page-load">
    <logo/>
    <p>Arak Rail Co.</p>
  </div>
</template>

<script>
export default {
  mounted() {
    ////////////////////////////////////////// global router guards
    this.$router.beforeEach((to, from, next) => {
      this.$gsap.timeline({
        onComplete: () => {
          next()
        }
      })
          .to($('.page-load'), {autoAlpha: 1, duration: 0.3})
          .fromTo($('.page-load svg'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
          .fromTo($('.page-load p'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
    })

    this.$router.afterEach((to, from) => {
      this.$gsap.timeline({delay: 0.3})
          .to($('.page-load p,.page-load svg'), {opacity: 0, scale: 0.5, duration: 0.15})
          .to($('.page-load'), {autoAlpha: 0, duration: 0.5})
    })
  }
}
</script>
