install vue-motion

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();