AFRAME.registerComponent('fox-lifecycle', {
    init() {
        this.fox = document.querySelector('#fox')

        this.listeners = {
            startAnimation: this.startAnimation.bind(this),
        }

        this.fox.addEventListener('start-animation', this.listeners.startAnimation)
    },
    startAnimation() {
        this.fox.setAttribute('visible', 'true')
        this.fox.setAttribute('animation-mixer', {
            clip: 'Animation',
            loop: 'once',
            clampWhenFinished: true,
        })
        this.fox.addEventListener('animation-finished', () => {
            this.fox.setAttribute('visible', 'false')
            this.fox.removeAttribute('animation-mixer')
        })
    },
})