update hooks and refactor lettering

package.json

@@ -11,7 +11,7 @@
     "gsap": "^2.0.2",
     "splitting": "^1.0.6",
     "vue": "^2.5.17",
-    "vue-hooks": "^0.3.1",
+    "vue-hooks": "^0.3.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/AppDetails.vue

@@ -14,10 +14,7 @@
 
 <script>
 import { preventscroll } from "./../hooks/preventscroll.js";
-import { TimelineMax, TweenMax, Sine, Elastic } from "gsap";
-import Splitting from "splitting";
-import "splitting/dist/splitting.css";
-import "splitting/dist/splitting-cells.css";
+import { lettering } from "./../hooks/lettering.js";
 
 export default {
   props: {
@@ -36,48 +33,9 @@ export default {
   },
   hooks() {
     preventscroll();
+    lettering();
   },
   methods: {
-    lettering() {
-      const title = this.$refs.title;
-      const desc = this.$refs.desc;
-
-      Splitting({ target: title, by: "chars" });
-      Splitting({ target: desc, by: "lines" });
-      const tl = new TimelineMax();
-
-      tl.add("start");
-      tl.staggerFromTo(
-        ".char",
-        3.5,
-        {
-          opacity: 0,
-          transformOrigin: "50% 50% -30px",
-          rotationY: 100
-        },
-        {
-          opacity: 1,
-          transformOrigin: "50% 50% 0",
-          rotationY: 0,
-          ease: Elastic.easeOut.config(1, 0.4)
-        },
-        0.02,
-        "start+=0.3"
-      );
-      tl.staggerFromTo(
-        desc.childNodes,
-        1.5,
-        {
-          opacity: 0
-        },
-        {
-          opacity: 1,
-          ease: Sine.easeOut
-        },
-        0.008,
-        "start+=0.6"
-      );
-    },
     fadeIn() {
       TweenMax.fromTo(
         ".-detail",
@@ -107,7 +65,6 @@ export default {
   },
   mounted() {
     this.fadeIn();
-    this.lettering();
   }
 };
 </script>

src/components/AppGrid.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import AppDetails from "./AppDetails.vue";
 import AppMobiledetails from "./AppMobiledetails.vue";
+import AppDetails from "./AppDetails.vue";
 import { TimelineMax, Sine } from "gsap";
 
 export default {

src/components/AppMobiledetails.vue

@@ -4,21 +4,18 @@
     :style="`background: url('${currentItem.name}.jpg') no-repeat left top; background-size: contain`"
   >
     <div class="mobilecontent">
-      <h2 class="title" ref="name">{{ currentItem.restaurant }}</h2>
+      <h2 class="title" ref="title">{{ currentItem.restaurant }}</h2>
       <div class="tags">
         <span v-for="tag in currentItem.tags" :key="tag">{{ tag }}</span>
       </div>
-      <p class="description" ref="description">{{ currentItem.desc }}</p>
+      <p class="description" ref="desc">{{ currentItem.desc }}</p>
       <button @click="closeModal">Back to Results</button>
     </div>
   </div>
 </template>
 
 <script>
-import { TimelineMax, TweenMax, Sine, Elastic } from "gsap";
-import Splitting from "splitting";
-import "splitting/dist/splitting.css";
-import "splitting/dist/splitting-cells.css";
+import { lettering } from "./../hooks/lettering.js";
 
 export default {
   props: {
@@ -27,50 +24,13 @@ export default {
       required: true
     }
   },
+  hooks() {
+    lettering();
+  },
   methods: {
     closeModal() {
       this.$emit("closeModal", false);
     },
-    lettering() {
-      const title = this.$refs.name;
-      const desc = this.$refs.description;
-
-      Splitting({ target: title, by: "chars" });
-      Splitting({ target: desc, by: "lines" });
-      const tl = new TimelineMax();
-
-      tl.add("start");
-      tl.staggerFromTo(
-        ".char",
-        3.5,
-        {
-          opacity: 0,
-          transformOrigin: "50% 50% -30px",
-          rotationY: 100
-        },
-        {
-          opacity: 1,
-          transformOrigin: "50% 50% 0",
-          rotationY: 0,
-          ease: Elastic.easeOut.config(1, 0.4)
-        },
-        0.02,
-        "start+=0.2"
-      );
-      tl.staggerFromTo(
-        desc.childNodes,
-        1.5,
-        {
-          opacity: 0
-        },
-        {
-          opacity: 1,
-          ease: Sine.easeOut
-        },
-        0.008,
-        "start+=0.5"
-      );
-    },
     fadeIn() {
       TweenMax.fromTo(
         ".mobiledetails",
@@ -87,7 +47,6 @@ export default {
     }
   },
   mounted() {
-    this.lettering();
     this.fadeIn();
   }
 };

src/hooks/lettering.js

@@ -0,0 +1,48 @@
+import { Elastic, Sine, TimelineMax } from "gsap";
+import Splitting from "splitting";
+import "splitting/dist/splitting-cells.css";
+import "splitting/dist/splitting.css";
+import { useMounted } from "vue-hooks";
+
+export function lettering() {
+  useMounted(function () {
+    const title = this.$refs.title;
+    const desc = this.$refs.desc;
+
+    Splitting({ target: title, by: "chars" });
+    Splitting({ target: desc, by: "lines" });
+    const tl = new TimelineMax();
+
+    tl.add("start");
+    tl.staggerFromTo(
+      ".char",
+      3.5,
+      {
+        opacity: 0,
+        transformOrigin: "50% 50% -30px",
+        rotationY: 100
+      },
+      {
+        opacity: 1,
+        transformOrigin: "50% 50% 0",
+        rotationY: 0,
+        ease: Elastic.easeOut.config(1, 0.4)
+      },
+      0.02,
+      "start+=0.3"
+    );
+    tl.staggerFromTo(
+      desc.childNodes,
+      1.5,
+      {
+        opacity: 0
+      },
+      {
+        opacity: 1,
+        ease: Sine.easeOut
+      },
+      0.008,
+      "start+=0.6"
+    );
+  })
+}

yarn.lock

@@ -7609,10 +7609,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-hooks@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/vue-hooks/-/vue-hooks-0.3.1.tgz#c4c9b90ce1040c0ce940131bde8805187345f657"
-  integrity sha512-rXTiJFeF65SKx22hOWANNJ9W0N1lzu8hvXl0ugRs3q4T3MOfgKBxkf09CDTMddCRH5rX9m/SzZw0fvMDUnJgWg==
+vue-hooks@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/vue-hooks/-/vue-hooks-0.3.2.tgz#60feb7401811758fdf0aa63dc8da1771dc8ded5c"
+  integrity sha512-yLNLPdEjtSNbGCICajRRJ6JcYNbQK3jvfr8PPpB4Tg0+9hBNaRk50+ZYNtlAy7xXBGLHbR8/h2Gjao5SZYZW4w==
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.1"