ScaleIn.vue

<template>
  <Transition
    :css="false"
    name="scale-in"
    mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <slot />
  </Transition>
</template>

<script>
import gsap from 'gsap'

export default {
  name: 'ScaleIn',

  methods: {
    beforeEnter(el) {
      gsap.set(el, { opacity: 1, scale: 0 })
    },
    enter(el, done) {
      gsap.to(el, {
        duration: 0.5,
        scale: 1,
        ease: 'expo',
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: 0.3,
        opacity: 0,
        ease: 'expo',
        onComplete: done
      })
    }
  }
}
</script>