install vue-motion

src/App.vue

@@ -6,7 +6,7 @@
     <div class="l-sidebar">
       <div id="logo-container">
         <router-link :to="{ name: 'Home' }">
-          ><div class="logo"></div
+          <div class="logo"></div
         ></router-link>
       </div>
       <Navigation />

src/components/PlaylistView/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="p-header image"
+    
     :style="[
       {
         backgroundImage: `url(${imguri + props.info.image})`,
@@ -11,7 +12,7 @@
     <div class="carddd">
       <div class="info">
         <div class="btns">
-          <PlayBtnRect :source="playSources.playlist" />
+          <PlayBtnRect :source="playSources.playlist" v-motion-slide-visible-once-bottom/>
           <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">
@@ -25,7 +26,7 @@
           {{ props.info.description }}
         </div>
         <div class="title ellip">{{ props.info.name }}</div>
-        <div class="type">Playlist</div>
+        <div class="type" >Playlist</div>
       </div>
     </div>
     <div class="last-updated">

src/components/RightSideBar/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
-      <Tab name="Tracks">
+      <Tab name="Tracks" v-motion-slide-visible-left>
         <TracksGrid />
       </Tab>
       <Tab name="Albums">

src/components/nav/NavBar.vue

@@ -7,7 +7,7 @@
 
       <div class="info">
         <div class="title" v-if="$route.name == 'Playlists'">Playlists</div>
-        <div class="folder" v-else-if="$route.name == 'FolderView'">
+        <div class="folder" v-else-if="$route.name == 'FolderView'" >
           <div class="fname">
             <div class="icon image"></div>
             <div class="ellip">

src/components/shared/SongItem.vue

@@ -4,15 +4,14 @@
     :class="[{ current: props.isCurrent }, { 'context-on': context_on }]"
     @dblclick="emitUpdate(props.song)"
     @contextmenu="showContextMenu"
+    v-motion-slide-visible-once-right
   >
     <div class="index">{{ props.index }}</div>
     <div class="flex">
       <div
         class="album-art image rounded"
         :style="{
-          backgroundImage: `url(&quot;${
-            imguri + props.song.image
-          }&quot;`,
+          backgroundImage: `url(&quot;${imguri + props.song.image}&quot;`,
         }"
         @click="emitUpdate(props.song)"
       >
@@ -74,7 +73,7 @@ import { paths } from "../../config";
 const contextStore = useContextStore();
 
 const context_on = ref(false);
-const imguri = paths.images.thumb
+const imguri = paths.images.thumb;
 
 const showContextMenu = (e: Event) => {
   e.preventDefault();

src/main.js

@@ -2,12 +2,15 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
-import { createPinia } from 'pinia'
-
+import { createPinia } from "pinia";
+import { MotionPlugin } from "@vueuse/motion";
 
 import "../src/assets/css/global.scss";
 
 const app = createApp(App);
-app.use(createPinia())
+
+app.use(createPinia());
 app.use(router);
-app.mount('#app');
+app.use(MotionPlugin);
+
+app.mount("#app");