SwiperとAnime.jsの共存は出来るのでしょうか？

画像スライド時にSVGfilterで水面が揺れるようなアニメーション（以下水面アニメーション）を加えようと思って制作しているのですが、
スライダーと水面アニメーション自体は出来ているのですが、
この二つの動きを同時に発火することが出来ません。

そもそもSwiperとAnime.jsを併用すること自体間違っているのでしょうか？
まだJSを学び始めたばかりでして、そう言ったところも教えて頂きたいです。
どうぞよろしくお願いいたします。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./swiper/dist/css/swiper.css">
    <title>Document</title>
</head>
<body>
<section class="images">
        <svg height="0">
                <defs>
                        <filter id="displacementFilter">
                                <feTurbulence type="turbulence" baseFrequency="0.19"
                                   numOctaves="4" result="turbulence"/>
                               <feDisplacementMap in2="turbulence" in="SourceGraphic"
                                   scale="20" xChannelSelector="R" yChannelSelector="G" />
                           </filter>
                </defs>>
        </svg>
        <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div>
                  <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
                  <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
                  <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-white"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <script src="./swiper/dist/js/swiper.min.js"></script>
              <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
              <!-- Initialize Swiper -->
              <script>
                var tl = anime.timeline({
                    duration: 3000,
                    easing: 'easeInOutQuart',
                    loop: true
                })

                tl.add({
                    targets: 'svg',
                    keyframes: [
                        { rotate: '0deg'},
                        { rotate: '360deg'},
                    ],
                    duration: 3000
                })

                tl.add({
                    targets: ["#logo", "feTurbulence", "feDisplacementMap"],
                    baseFrequency: 0,
                    scale: 1,
                    ratate: "360deg",
                }, "-=4000")
                var swiper = new Swiper('.swiper-container', {
                  spaceBetween: 30,
                  effect: 'fade',
                  autoplay: true,
                  transitionStart: function(){
                    return tl;
                  }
                });

                
              </script>
</section>
</body>
</html>