Skip to content

Instantly share code, notes, and snippets.

@leemartin
Created June 22, 2022 13:22
Show Gist options
  • Save leemartin/50370c3eb7af9715a20e55ffcce18fa7 to your computer and use it in GitHub Desktop.
Save leemartin/50370c3eb7af9715a20e55ffcce18fa7 to your computer and use it in GitHub Desktop.
Planet Zero Observer Panel Blink Transition
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment