wave.vue

<template>
  <div class="character-screen__vertical-wave">
    <svg
      viewBox="0 0 202 1449"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g
        id="Page-1"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g
          id="morphed-waves-2-copy"
          transform="translate(101.000000, 724.500000) rotate(-270.000000) translate(-101.000000, -724.500000) translate(-623.000000, 624.000000)"
          fill-rule="nonzero"
        >
          <path
            d="M1.1186785,148.179787 L49.3186785,126.51153 C97.5186785,105.167892 292.490905,62.2445799 388.890905,66.8703875 C485.290905,71.171577 588.296564,141.582419 684.696564,137.281229 C781.096564,132.655422 812.13107,10.0674792 908.53107,1.14048214 C1004.93107,-7.78651493 1061.51868,79.1984458 1157.91868,100.542084 C1254.31868,122.210341 1350.71868,122.210341 1398.91868,122.210341 L1447.11868,122.210341 L1447.11868,200.118679 L1398.91868,200.118679 C1350.71868,200.118679 1254.31868,200.118679 1157.91868,200.118679 C1061.51868,200.118679 965.118679,200.118679 868.718679,200.118679 C772.318679,200.118679 675.918679,200.118679 579.518679,200.118679 C483.118679,200.118679 386.718679,200.118679 290.318679,200.118679 C193.918679,200.118679 97.5186785,200.118679 49.3186785,200.118679 L1.1186785,200.118679 L1.1186785,148.179787 Z"
            id="wave-path-1"
            fill="currentColor"
            style="display: none"
          ></path>
          <path
            d="M0.5,148.561108 L48.7,126.892852 C96.9,105.549213 193.3,61.7257732 289.7,66.3515807 C386.1,70.6527702 482.5,122.591662 578.9,118.290473 C675.3,113.664665 771.7,53.6103213 868.1,44.6833242 C964.5,35.7563272 1060.9,79.5797673 1157.3,100.923406 C1253.7,122.591662 1350.1,122.591662 1398.3,122.591662 L1446.5,122.591662 L1446.5,200.5 L1398.3,200.5 C1350.1,200.5 1253.7,200.5 1157.3,200.5 C1060.9,200.5 964.5,200.5 868.1,200.5 C771.7,200.5 675.3,200.5 578.9,200.5 C482.5,200.5 386.1,200.5 289.7,200.5 C193.3,200.5 96.9,200.5 48.7,200.5 L0.5,200.5 L0.5,148.561108 Z"
            id="wave-path-2"
            fill="currentColor"
          ></path>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
import gsap from "gsap";
import { mapState } from "vuex";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
export default {
  data() {
    return {};
  },
  mounted: function() {
    if (process.client) {
      gsap.registerPlugin(MorphSVGPlugin);
    }
    // Wave Animation
    const waveTl = gsap.timeline({ repeat: -1, yoyo: true });
    waveTl.to("#wave-path-2", { duration: 3, morphSVG: "#wave-path-1" });
  },
  components: {},
  methods: {}
};
</script>