Vue Animation Individual floating elements like on Coachella website - animation

Question

Can anyone point out how to achieve something similar to
https://www.coachella.com/home/
Social section animation/carousel
Can someone point out how we may create it in a Vue object with the help of transitions and more..
HTML
<template>
<div id="app">
<div class="cent">
<button v-on:click="show = !show">Toggle</button>
</div>
<div class="cent">
<transition v-for="block in blocks" :key="block" name="fade">
<div class="block" v-if="show">
<p class="els">{{block}}</p>
</div>
</transition>
</div>
</div>
</template>
JS
export default {
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App",
show: false,
blocks: ["element", "fire", "water", "earth", "wind"]
};
}
};
CSS
.els{
background-color: aqua;
display: inline-flex;
padding:20px;
}
.cent{
margin-left:auto;
margin-right:auto;
display: flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.block {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
flex-basis: auto;
}
.fade-enter{
}
.fade-enter-active{
animation:slideIn 1s ease-out forwards;
}
.fade-leave{
}
.fade-leave-active{
animation:slideOut 1s ease-out forwards;
}
#keyframes slideIn {
from {
transform:translateX(100%);
}
to {
transform:translateX(0%);
}
}
#keyframes slideOut {
from {
transform:translateX(0%);
}
to {
transform:translateX(100%);
}
}
Just a basic try to make elements of blocks float... But as said earlier i want to make it float like coachella site.
P.S
I have tried google and other resources like madewithvuejs and others but didn't found anything similar.
Any help would be grateful..