<template>
  <div class="pageLoad">
    <div class="relativePos">
      <div class="imgBox">
        <!--        <img src="/img/logo.svg" alt="OrisOxin">-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$router.beforeEach((to, from, next) => {
      this.$gsap.timeline({
        onComplete: () => {
          next()
        }
      })
          .set($('.pageLoad'), {display: 'block'})
          // .fromTo($('.page-wrapper'), {x: 0}, {x: this.$route.params.lang === 'en' ? 200 : -200, duration: 0.7})
          // .fromTo($('.pageLoad'), {left: this.$route.params.lang === 'en' ? '-100%' : '100%'}, {left: 0, duration: 0.7}, 0)
          .fromTo($('.page-wrapper'), {opacity: 1}, {opacity: 0, duration: 0.6})
          .fromTo($('.pageLoad'), {opacity: 0}, {opacity: 1, duration: 0.6}, 0)

    })

    this.$router.afterEach((to, from) => {

      this.$gsap.timeline({
        delay: 0.5
      })
          // .fromTo($('.page-wrapper'), {x: this.$route.params.lang === 'en' ? -200 : 200}, {x: 0, duration: 0.7})
          // .fromTo($('.pageLoad'), {left: 0}, {left: this.$route.params.lang === 'en' ? '100%' : '-100%', duration: 0.7}, 0)
          .fromTo($('.page-wrapper'), {opacity: 0}, {opacity: 1, duration: 0.6})
          .fromTo($('.pageLoad'), {opacity: 1}, {opacity: 0, duration: 0.6}, 0)
          .set($('.pageLoad'), {display: 'none'})
    })
  }
}
</script>
