Implement waterfall animation

components/Events.vue

@@ -1,10 +1,19 @@
 <template>
-  <div class="mainContainer">
+  <div class="events-container">
+    <lottie id="waterfall" :options="options" style="position: absolute" />
     <div class="no-overflow rows is-3-tablet">
-      <div v-for="item in sortedEvents" :key="item.order" :class="{ flipped: isFlipped(item) }">
+      <div
+        v-for="item in sortedEvents"
+        :key="item.order"
+        :class="{ flipped: isFlipped(item) }"
+      >
         <div class="events row">
           <div class="image-container">
-            <img :src="getImageURL(item)" :alt="`${item.title}, ${item.date}`" class="image">
+            <img
+              :src="getImageURL(item)"
+              :alt="`${item.title}, ${item.date}`"
+              class="image"
+            >
           </div>
           <div class="blob-container">
             <img :src="arrow" alt="right-arrow" class="arrow">
@@ -19,9 +28,18 @@
 </template>
 
 <script>
+import lottie from 'vue-lottie'
 import orderBy from 'lodash.orderby'
 import arrow from '../assets/sprite/svg/events__arrow.svg'
+import boat from '../assets/sprite/svg/events__boat.svg'
+import animationData from '../assets/animation/events__waterfall.json'
+
+animationData.assets[0].u = boat
+
 export default {
+  components: {
+    lottie
+  },
   props: {
     items: {
       type: Array,
@@ -30,7 +48,13 @@ export default {
   },
   data: function () {
     return {
-      arrow
+      arrow,
+      boat,
+      options: {
+        animationData
+      },
+      animationSpeed: 1,
+      animate: screen.width > 768
     }
   },
   computed: {
@@ -60,13 +84,14 @@ $white: #ffffff;
 $heading-font: "Caveat Brush";
 $body-font: "Source Sans Pro", sans-serif;
 
-.mainContainer {
-  background-image: url("~@/assets/sprite/png/events__background.png");
+.events-container {
+  background-image: url("~@/assets/sprite/svg/events__background.svg");
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 100vw;
   min-height: 133vw;
   position: relative;
+  overflow: hidden;
   &::before {
     display: block;
     content: "";
@@ -76,7 +101,7 @@ $body-font: "Source Sans Pro", sans-serif;
     z-index: -1;
   }
   @include until($tablet) {
-    background-image: url("~@/assets/sprite/png/events__background_sm.png");
+    background-image: url("~@/assets/sprite/svg/events__background_sm.svg");
     min-height: 237vw;
   }
 }
@@ -125,10 +150,16 @@ $body-font: "Source Sans Pro", sans-serif;
   }
   .flipped {
     .row {
-      bottom: 30%;
+      bottom: 21%;
       position: absolute;
       right: $gap;
     }
   }
 }
+
+#waterfall {
+  @include until($tablet) {
+    transform: scale(1.5) translate(-8.5vw, 0);
+  }
+}
 </style>

package.json

@@ -44,6 +44,7 @@
     "vue-clickaway": "^2.2.2",
     "vue-data-proxy": "^1.0.4",
     "vue-kinesis": "^1.0.4",
+    "vue-lottie": "^0.2.1",
     "vue-scrollto": "^2.15.0",
     "vue-snowf": "^0.0.2",
     "vuejs-auto-complete": "^0.9.0",

yarn.lock

@@ -7354,6 +7354,11 @@ loose-envify@^1.0.0, loose-envify@^1.2.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.1.9:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.3.tgz#dbe542270665be5dd5b32deae19e27de6e77728c"
+  integrity sha512-ftN4AdiNmtoVpCfN1doiUIUbhOrDSMikH1Yl64/xO5lzQ31AO0+G82bqrCNHIW5Ec2zE/g7y4iz7zBR1YJwDaA==
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -11522,6 +11527,13 @@ vue-loader@^15.9.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-lottie@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue-lottie/-/vue-lottie-0.2.1.tgz#f9f62c34a276e6834255406118fb05b51f765e4b"
+  integrity sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==
+  dependencies:
+    lottie-web "^5.1.9"
+
 vue-meta@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"