JQuery スクロール時ふわっと左から表示　機能しない

前提

ある程度の所までスクロールして特定要素の位置まで来た時に、その要素を左側からすっと華麗に出現させたいと思っています。

実際はスクロールしてもその要素が現れるどころかずっと消えたままです。CSSの最初の要素がついたまま？JQueryのコードを見ると、$ is not definedと書いてありますが、ディベロッパーツールのコンソールには読み込めない等のエラーが書いていないため、読み込みエラーでもないのかなと感じてます。御助言宜しくお願いいたします。

HTML
1<section class="food inview fadeIn_left">
2        <div class="container">
3            <div class="food_left">
4                <h2>SDGs</h2>
5                <p>あああああああああああああ</p>
6　　　　　 <p>あああああああああああああ</p>
7                <div class="food_btn">詳細</div>
8            </div>
9            <div class="food_right">
10                    <div class="food_subpics">
11                        <div class="food1">
12                            <img src="img/food_1.png">
13                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</span>
14                            ストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
15                        </div>
16                        <div class="food2">
17                            <img src="img/food_2.png">
18                        </div>
19                    </div>
20            </div>
21        </div>
22</section>
23
24~~~~~~~~~~~~~~~~~~~~~~~~
25~~~~~~~~~~~~~~~~~~~~~~~~
26<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
27<script src="https://cdn.jsdelivr.net/npm/jquery-waypoints@2.0.5/waypoints.min.js"></script>
28<script src="js/main.js"></script>
29</body>
30</html>

CSS
1.fadeIn_left {
2  opacity: 0;
3  transform: translate(-50%, 0);
4  transition: 2s;
5}
6.fadeIn_left.is-show {
7  transform: translate(0, 0);
8  opacity: 1;
9}

JQuery
1$(function(){
2  $(function(){
3  $(".inview").on("inview", function (event, isInView) {
4    if (isInView) {
5      $(this).stop().addClass("is-show");
6    }
7  });
8 });
9});