Skip to content

Instantly share code, notes, and snippets.

@leemartin
Created December 20, 2023 16:43
Show Gist options
  • Save leemartin/2cc1d92f25a67f94a1dfc13d7b13e02c to your computer and use it in GitHub Desktop.
Save leemartin/2cc1d92f25a67f94a1dfc13d7b13e02c to your computer and use it in GitHub Desktop.
Vue Sci-Fi Blinking Panel Transition
<template>
<Transition :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @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("button, .line, p, svg"), {
opacity: 0
})
},
onEnter(el, done) {
// Randomly blink in all incoming elements
gsap.to(el.querySelectorAll("button, .line, p, 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 fade out all outgoing elements
gsap.to(el.querySelectorAll("button, .line, p, 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