Basic Javascript hooks of Shelter In Space "Scanner" transition

Scan.js

methods: {
  beforeEnter(el) {
    el.style.cssText = "clip-path: inset(0 0 100% 0)"
  },
  enter(el, done) {
    let scan = { percent: 100 }
    
    anime({
      targets: scan,
      percent: 0,
      duration: 2000,
      easing: "linear",
      update() {
        el.style.cssText = `clip-path: inset(0 0 ${scan.percent}% 0)`
        
        document.getElementById('scan').style.top = `${100 - scan.percent}%`
      },
      complete() {
        done()
      }
    })
  },
  leave(el, done) {
    let scan = { percent: 0 }
    
    anime({
      targets: scan,
      percent: 100,
      duration: 2000,
      easing: "linear",
      update() {
        el.style.cssText = `clip-path: inset(${scan.percent}% 0 0 0)`
      },
      complete() {
        done()
      }
    })
  }
}