Lesson 9 final

Code-Pop · Dec 16, 2019 · 1f2d8c5 · 1f2d8c5
1 parent 27b2435
commit 1f2d8c5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 24 deletions.
diff --git a/src/views/Master.vue b/src/views/Master.vue
@@ -8,36 +8,57 @@
 
       <img id="fox" src="../assets/fox.png" alt="fox-logo" />
     </div>
+    <button @click="play">Play</button>
   </div>
 </template>
 
 <script>
 import gsap from 'gsap'
+let masterTL = gsap.timeline()
 
 export default {
-  mounted() {
-    let tl = gsap.timeline()
-    tl.to('.first', {
-      opacity: 4,
-      scale: 1,
-      duration: 0.5,
-      ease: 'bounce.out'
-    })
-    tl.to(
-      '.second',
-      { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
-      '<.3'
-    )
-    tl.to(
-      '.third',
-      { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
-      '<.3'
-    )
-    tl.to(
-      '.fourth',
-      { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
-      '<.3'
-    )
+  methods: {
+    play() {
+      masterTL.add(this.pawsTL())
+      masterTL.add(this.foxTL())
+      masterTL.play()
+    },
+    pawsTL() {
+      let tl = gsap.timeline()
+      tl.to('.first', {
+        opacity: 1,
+        scale: 1,
+        duration: 0.5,
+        ease: 'bounce.out'
+      })
+      tl.to(
+        '.second',
+        { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
+        '<.3'
+      )
+      tl.to(
+        '.third',
+        { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
+        '<.3'
+      )
+      tl.to(
+        '.fourth',
+        { opacity: 1, scale: 1, duration: 0.5, ease: 'bounce.out' },
+        '<.3'
+      )
+      return tl
+    },
+    foxTL() {
+      let tl = gsap.timeline()
+      tl.to('#fox', {
+        opacity: 1,
+        filter: 'blur(0)',
+        scale: 1,
+        duration: 0.4,
+        ease: 'slow'
+      })
+      return tl
+    }
   }
 }
 </script>
@@ -53,6 +74,8 @@ export default {
 #fox {
   height: 8em;
   width: 8em;
+  opacity: 0;
+  filter: blur(2px);
 }
 
 .paws {

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
@@ -11,7 +11,10 @@ import gsap from 'gsap'
 
 export default {
   mounted() {
-    // timeline will go here
+    let tl = gsap.timeline({ repeat: -1, repeatDelay: 1 })
+    tl.to('.first', { x: 700, duration: 2, ease: 'expo.out' })
+    tl.to('.second', { x: 700, duration: 2, ease: 'expo.out' }, '<.5')
+    tl.to('.third', { x: 700, duration: 2, ease: 'expo.out' }, '<')
   }
 }
 </script>