【JQuery】pagepiling.jsで１ページスクロールにしwavify.jsで背景に波を付けたい

pagepiling.jsで１ページスクロールにしwavify.jsで背景に波を付けたい

現在DreamWeaverを使用しWEBデザインのポートフォリオを作ってます。
pagepiling.jsを使い1ページスクロールにすることは出来たのですが、背景に波を入れたいのでWavify.jsを使い作成したところ、波が表示されない事態となりました。

1ページスクロールだけ、波だけ、の個々での作成だと反応するのですが組み合わせるとどうしても片方が反応してもらえません。

HTML

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/jquery.pagepiling.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>無題ドキュメント</title>
</head>

<body>
<header class="header">
  <nav class="header__navigation">
    <ul id="menu">
      <li data-menuanchor="page1" class="active"><a href="#page1">TOP</a></li>
      <li data-menuanchor="page2"><a href="#page2">WORKS</a></li>
      <li data-menuanchor="page3"><a href="#page3">ABOUT</a></li>
      <li data-menuanchor="page4"><a href="#page4">CONTACT</a></li>
    </ul>
  </nav>
</header>
<div id="pagepiling">
  <div class="contents" id="section1">
    <div class="container">
      <div class="section-top">
        <div class="section-top__image">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
        </div>
        <h2>AAAA BBBBB</h2>
        <p>This site is a portfolio site.</p>
        <div class="section-top__image index">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
          <img src="assets/images/top/top__artline.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="contents" id="section2">
  </div>
  <div class="contents" id="section3">
  </div>
  <div class="contents" id="section4">
  </div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/js/jquery.pagepiling.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/jquery.wavify.js"></script>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

/*全体*/
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  color: #404040; /* RGB */
  background-color: #FCFCFC;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
}

/*ヘッダー*/
.header {
  height: 84px;
  font-size: 1.8rem;
}
.header__navigation {
  width: 100%;
  height: 100%;
}
.header__navigation ul li {
  display: inline-block;
  margin-left: 67px;
}
.header__navigation ul li a {
  text-decoration: none;
  color: #040404;
}
#menu{
  position: fixed;
  z-index: 9999;
  right: 143px;
  top: 4.2%;
}

/*波*/
svg {
  height: 50%;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 96px auto 0;
}

/*トップ*/
.section-top {
  width: 635px;
  height: 100%;
}
.section-top__image {
  display: flex;
  width: 640px;
  height: auto;
  margin-bottom: 100px;
}
.index {
  position: absolute;
  z-index: 1;
}
.section-top img {
  width: 160px;
  height: auto;
}
.section-top h2 {
  font-size: 3.2rem;
  letter-spacing: .2em;
}
.section-top p {
  font-size: 1.4rem;
  margin: 52px 0 100px;
  letter-spacing: .1em;
}

JavaScript

<script>
  $('#wave').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: '#F0F0F0',
  speed: .25
});
  $(document).ready(function() {
  $('#pagepiling').pagepiling({
    menu: '#menu',
    sectionsColor: ['#fcfcfc', '#86A9AB', '#fcfcfc', '#fcfcfc'],
    anchors: ['page1', 'page2', 'page3','page4'],
    navigation: {
      'position': 'right',
      'tooltips': ['section1', 'section2', 'section3', 'section4'],
//      loopBottom: true
    },
    scrollingSpeed: 1000,
    sectionSelector: '.contents'
  });
});
</script>

二つの動作を入れるのは出来ないのでしょうか、、
ずっと行き詰まってしまい、、何とかご回答をお願いします。