gsap ok before scrollmagic

JohnLing73 · Oct 3, 2021 · 00c35b8 · 00c35b8
1 parent e00b058
commit 00c35b8
Showing 4 changed files with 106 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "axios": "^0.21.4",
     "core-js": "^3.6.5",
     "gsap": "^3.7.1",
+    "scrollmagic": "^2.0.8",
     "swiper": "^6.8.4",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",

diff --git a/src/pages/Home/HomePage.vue b/src/pages/Home/HomePage.vue
@@ -1,5 +1,24 @@
 <template>
   <div>
+    <section id="sign-up-banner">
+      <div>
+          <div id="sign-up-slogan">
+            <h3>Sign Up For More...</h3>
+            <ol>
+              <li>Buy the product.</li>
+              <li>Build your own whishlists.</li>
+              <li>Check your orders.</li>
+              <li>
+                <base-button :link = "false" @click= "toSignPage">Sign Up / In</base-button>
+              </li>
+            </ol>
+          </div>
+      </div>
+      <finger-icon
+        :color= "svgTheme"
+      >
+      </finger-icon>
+    </section>
     <transition name="wrapper">
       <landing-page v-if="animate && showOnce" @mouseover="triggerLeave"></landing-page>
     </transition>
@@ -37,25 +56,25 @@
         <recommend-slide></recommend-slide>
       </section>
     </main>
-      <section id="sign-up-banner">
-        <div>
-            <div id="sign-up-slogan">
-              <h3>Sign Up For More...</h3>
-              <ol>
-                <li>Buy the product.</li>
-                <li>Build your own whishlists.</li>
-                <li>Check your orders.</li>
-                <li>
-                  <base-button :link = "false" @click= "toSignPage">Sign Up / In</base-button>
-                </li>
-              </ol>
-            </div>
-        </div>
-        <finger-icon
-          :color= "svgTheme"
-        >
-        </finger-icon>
-      </section>
+    <!-- <section id="sign-up-banner">
+      <div>
+          <div id="sign-up-slogan">
+            <h3>Sign Up For More...</h3>
+            <ol>
+              <li>Buy the product.</li>
+              <li>Build your own whishlists.</li>
+              <li>Check your orders.</li>
+              <li>
+                <base-button :link = "false" @click= "toSignPage">Sign Up / In</base-button>
+              </li>
+            </ol>
+          </div>
+      </div>
+      <finger-icon
+        :color= "svgTheme"
+      >
+      </finger-icon>
+    </section> -->
   </div>
 </template>
 <script>
@@ -150,9 +169,8 @@ export default {
   }
   #sign-up-banner {
     background-image: linear-gradient(120deg, #6bd692 0%, #8fd3f4 100%);
-    padding: 2rem;
-    padding-top: 6rem;
-    padding-bottom: 3rem;  
+    padding: 6rem 2rem;
+    position: relative;
     > div {
       display: flex;
       justify-content: center;
@@ -169,6 +187,7 @@ export default {
       li {
         font-size: $h3;
         margin-bottom: 0.8rem;
+        position: relative;
       }
   }
   #sign-up-slogan {

diff --git a/src/ui/FingerIcon.vue b/src/ui/FingerIcon.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
+  <div id="finger-icon">
     <svg
       width="106"
       height="85"
+      ref="finger"
       viewBox="0 0 106 85"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -15,8 +16,63 @@
   </div>
 </template>
 <script>
+import { gsap } from "gsap";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+
+// const ScrollMagic = require('scrollmagic');
+// import 'ScrollMagicGSAP'
+
+gsap.registerPlugin(MotionPathPlugin);
+
 export default {
-  props: ['color']
+  props: ['color'],
+  methods: {
+    animation() {
+      const tl = gsap.timeline();
+      const { finger } = this.$refs;
+      tl.to( finger, {
+        motionPath: {
+          path: [
+            {xPercent: 850, yPercent: -250, opacity: 0.3},
+            {xPercent: 250, yPercent: 70, opacity: 0.5},
+            {xPercent: 50, yPercent: 50, opacity: 0.7},
+            {x: 0, y: 0, opacity: 1},
+          ],
+        },
+        duration: 2,
+      })
+      .to( finger,{
+        rotation: 45,
+        x: -45,
+        duration: 0.5
+      }, '-=0.5')
+
+    //   const controller = new ScrollMagicController();//error
+    //   const scene = new ScrollMagic.Scene({
+    //     triggerElement: finger,
+    //     duration: 1000
+    //   })
+    //     .set(tl)
+    //     addIndicators()
+    //     addTo(controller);
+    }
+  },
+  mounted() {
+    this.animation();
+  }
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+
+  .box {
+    width: 100px;
+    height: 100px;
+    background-color: rgb(247, 81, 233);
+    border: 8px;
+    box-shadow: 0px 2px 2px rgba(252, 252, 235, 0.863);
+  }
+  #finger-icon {
+    position: relative;
+  }
+  
+</style>