From 79cbf11af59a5f7c1e93c6c52757d8b2d9df6424 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 25 May 2022 16:23:59 +0300
Subject: [PATCH] add custom transitions

---
 src/main.js        |  4 +--
 src/transitions.ts | 70 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/transitions.ts

diff --git a/src/main.js b/src/main.js
index a3a1ab00..d1a44e36 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,13 +4,13 @@ import "./registerServiceWorker";
 import router from "./router";
 import { createPinia } from "pinia";
 import { MotionPlugin } from "@vueuse/motion";
-
+import useCustomTransitions from "./transitions";
 import "../src/assets/css/global.scss";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
-app.use(MotionPlugin);
+app.use(MotionPlugin, useCustomTransitions);
 
 app.mount("#app");
diff --git a/src/transitions.ts b/src/transitions.ts
new file mode 100644
index 00000000..4e393909
--- /dev/null
+++ b/src/transitions.ts
@@ -0,0 +1,70 @@
+export default {
+  directives: {
+    "slide-from-left": {
+      initial: {
+        opacity: 0,
+        x: 0,
+        y: 20
+      },
+      enter: {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        transition: {
+          duration: 100,
+          ease: "circInOut",
+        },
+      },
+    },
+    "slide-from-left-100": {
+      initial: {
+        opacity: 0,
+        x: -20,
+      },
+      enter: {
+        opacity: 1,
+        x: 0,
+        transition: {
+          delay: 100,
+        },
+      },
+    },
+    "slide-from-top": {
+      initial: {
+        y: -20,
+        opacity: 0,
+      },
+      enter: {
+        y: 0,
+        opacity: 1,
+        transition: {
+          delay: 200,
+        },
+      },
+    },
+    "slide-from-right": {
+      initial: {
+        x: 20,
+        opacity: 0,
+      },
+      enter: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          delay: 200,
+        },
+      },
+    },
+    scale: {
+      initial: {
+        scale: 0.8,
+      },
+      enter: {
+        scale: 1,
+        transition: {
+          duration: 200,
+        },
+      },
+    },
+  },
+};