scrollify.jsを使ってアニメーション付きでスクロールさせたい

前提・実現したいこと

jqueryのプラグインであるscrollify.jsを使って画面を一面スクロールさせつつ、スクロール時にアニメーションをつけたいと考えています。現時点でスクロール自体はうまくいっているのですが、アニメーションがうまく行かず困っています。
詳しい方いらっしゃいましたらお力をお貸しいただけると幸いです。

該当のソースコード

HTML
1<div class=" scroll">
2        <div class="jumbotron jumbotron-fluid catch-copy" id="catch-copy">
3                <div class="container">
4                    <div class="fadein">
5                    <h2 class="display-3">Roomba</h2>
6                    <p>ーーーーーーーーーーー<br>
7                        ーーーーーーーーーーーーーーーー<br>
8                        ーーーーーーーーーーーーーーーー
9　　　　　　　　　　　　</p>
10                    </div>
11                </div>
12        </div>
13    </div>
14

css
1.catch-copy {
2    height: 100vh;
3    background-color: #D0DFE6;
4}
5
6.scroll {
7    width: 100%;
8}
9
10.scroll-content {
11    opacity: 0;
12    transition: opacity .5s ease .75s;
13}
14
15//下のisーshowクラスをスクロール時に付与したいです。
16
17.is-show {
18    opacity: 1;
19}

JS
1//scrolllify
2var $section = $('.scroll')
3
4	var option = {
5		section: ".scroll",
6		easing: "swing",
7		scrollSpeed: 800,
8		scrollbars: true,
9		
10		before:function(index, section) {
11			setCurrent(index); // 現在のsectionにクラスを設定
12		},
13		afterRender:function() {
14			setCurrent(); // 現在のsectionにクラスを設定
15		}
16	};
17
18	$(function() {
19		$.scrollify(option); // scrollifyの実行
20	  });
21
22	  // 現在のsectionにクラスを設定
23function setCurrent(index = 0) {
24	// 一旦、すべてのsectionのクラスをとる
25	$section.removeClass('is-show');
26	// 現在のsectionのみにクラスを付与
27	$section.eq(index).addClass('is-show');
28  }