How can my splash screen be implemented into Vue? - vue.js

Question

Side note:
The splash screen code below from my Vue app is a view file not a component. Also I'm suing Vue router.
So below is my code, this is a splash screen using Gsap that has a callback function that I can later put in a route that goes to '/' which is the Home view.
How can I have this view showed first when launching the Vue app? And then once the animation is completed the callback will direct the user to the home page. Also one more thing, I'm not sure how this would work, but I want to make sure that once a user goes to the home page and some reason they refresh they don't have to see the splash screen again. How can that also be achieved?
Note: I did try to mess with the index.js under router but nothing worked and redirect never allowed the user to get to the home page.
HTML:
<template>
<div class="module_wrapper">
<h1 ref="title">Welcome</h1>
<div ref="module" class="module">
<div class="top_wrapper">
<div ref="box1" class="box box_1"></div>
</div>
<div class="bottom_wrapper">
<div ref="box2" class="box box_2"></div>
<div ref="box3" class="box box_4"></div>
<div ref="box4" class="box box_5"></div>
<div ref="box5" class="box box_3"></div>
</div>
</div>
</div>
</template>
JavaScript:
import { TimelineLite, Back } from 'gsap';
export default {
methods: {
onCompleteAll () {
console.log('done');
}
},
mounted () {
const {module} = this.$refs;
const {title} = this.$refs;
const {box1} = this.$refs;
const {box2} = this.$refs;
const {box3} = this.$refs;
const {box4} = this.$refs;
const {box5} = this.$refs;
const {top} = this.$refs;
const {bottom} = this.$refs;
const timeline = new TimelineLite({onComplete: this.onCompleteAll});
timeline.to(module, 1.3, {scale: 1, ease: 'elastic.out(1, 0.5)',})
.to(box1, 0.5, {opacity: 1, translateY: 0, ease: Back.easeInOut}, '-=0.4')
.to(box2, 0.5, {opacity: 1, translateY: 0, ease: Back.easeInOut}, '-=0.4')
.to(box3, 0.5, {opacity: 1, translateY: 0, ease: Back.easeInOut}, '-=0.4')
.to(box4, 0.5, {opacity: 1, translateY: 0, ease: Back.easeInOut}, '-=0.4')
.to(box5, 0.5, {opacity: 1, translateY: 0, ease: Back.easeInOut}, '-=0.4')
.to(top, 0.4, {marginLeft: 10 + '%', ease: Back.easeInOut}, '-=0.2')
.to(bottom, 0.4, {marginLeft: 10 + '%', ease: Back.easeInOut}, '-=0.2')
.to(title, 0.4, {
translateY: 0,
opacity: 1,
ease: Back.easeInOut
}, '-=0.8');
}
};
CSS:
#app {
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
html {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
outline: none;
}
html {
width: 100%;
height: 100%;
overflow: hidden;
}
html, body {
transform: perspective(1px) scale(1) translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: radial-gradient(#656565, #000000);
width: 100%;
height: 100%;
}
.module_wrapper {
color: white;
text-align: center;
height: 13.4375rem;
width: 18.75rem;
margin: 0;
padding: 0;
border-radius: 0.75rem;
}
h1 {
font-size: 1.4375rem;
font-weight: 500;
color: #D9D9D9;
letter-spacing: 0.5rem;
cursor: default;
opacity: 0;
transform: translateY(10px);
}
.module {
background-color: #fff;
border-radius: 0.75rem;
width: 18.75rem;
height: 11.375rem;
margin: 0;
padding: 0;
transform: scale(0);
}
.top_wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
padding: 0 1.25rem;
}
.bottom_wrapper {
display: flex;
align-items: center;
padding: 0 1.25rem;
justify-content: space-evenly;
height: 50%;
}
.box {
background-color: #D9D9D9;
border-radius: 0.4375rem;
margin: 0;
padding: 0;
transform: translateY(-40px);
opacity: 0;
}
.box_1 {
width: 14.375rem;
height: 3.6rem;
}
.box_2, .box_3, .box_4, .box_5 {
width: 2.875rem;
height: 3.25rem;
}

Answer 1

You will need to add a Navigation Guard to your / route.
The general idea is:
-Check if the user has already authenticated
-if they have, call next()
-if they haven't, redirect them to the login/splash page: next('login')

Answer 2

There are a few options, but I think the best one will be to control the component's visibility in App.vue rather than inside the component. When the animation is over emit something to the parent, listen to that thing in the parent, and change the component visibility.
In order to display animation only one time, use session storage or local storage, and as the first job on page load, check if storage has anything about that. If it doesn't play your animation.