Planet Zero Observer Panel Blink Transition

PanelTransition.vue

<template>
  <Transition :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" mode="out-in">
    <slot></slot>
  </Transition>
</template>

<script>
import gsap from 'gsap'

export default {
  methods: {
    onBeforeEnter(el) {
      // Set all incoming elements transparent
      gsap.set(el.querySelectorAll("svg"), {
        opacity: 0
      })

    },
    onEnter(el, done) {
      // Randomly blink in all incoming elements
      gsap.to(el.querySelectorAll("svg"), {
        duration: 0.5,
        keyframes: [
          {
            opacity: 0.5
          }, {
            opacity: 0.0
          }, {
            opacity: 0.5
          }, {
            opacity: 0.0
          }, {
            opacity: 1.0
          }, {
            opacity: 0.5
          }, {
            opacity: 1.0
          }
        ],
        ease: "power1.inOut",
        stagger: {
          from: "random",
          amount: 1
        },
        onComplete: () => {
          // Done
          done()

        }
      })

    },
    onLeave(el, done) {
      // Randomly blink out all outgoing elements
      gsap.to(el.querySelectorAll("svg"), {
        duration: 0.5,
        keyframes: [
          {
            opacity: 0.5
          }, {
            opacity: 1.0
          }, {
            opacity: 0.0
          }, {
            opacity: 0.5
          }, {
            opacity: 0.0
          }, {
            opacity: 0.5
          }, {
            opacity: 0.0
          }
        ],
        ease: "power1.inOut",
        stagger: {
          from: "random",
          amount: 1
        },
        onComplete: () => {
          // Done
          done()

        }
      })

    }
  }
}
</script>