ScrollTrigger.jsとanimate.cssが動作せず困っています

前提・実現したいこと

Animate.cssとScrolltTrigger.jsを使って画面スクロール時にアニメーションをつけたい

発生している問題・エラーメッセージ

Animate.cssとScrolltTrigger.jsの組み合わせでページをスクロールしていくと、動きを付けるようにしたいのですが
動作せずに困っています。

エラーメッセージ
Uncaught TypeError: ScrollTrigger.init is not a function

該当のソースコード

HTML
1<!DOCTYPE html>
2<html class="animsition" data-animsition-in-class="fade-in-left">
3<head>
4	<meta charset="UTF-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">	
6	<title></title>	
7	<meta name="description" content="">
8	<meta name="keywords" content="">
9	<meta name="viewport" content="width=device-width,initial-scale=1">
10	<meta http-equiv="X-UA-Compatible" content="IE=edge">
11	<link href="css/common.css" rel="stylesheet">
12	<link href="css/common_sp.css" rel="stylesheet">	
13	<link href="css/index.css" rel="stylesheet">
14	<link href="css/index_sp.css" rel="stylesheet"> 
15	<link href="css/swiper.min.css" rel="stylesheet">
16	<link href="css/animsition.min.css" rel="stylesheet">
17	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
18	<!-- jQuery -->	
19	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
20</head>
21<body>
22	
23<!--<div id="top">
24	<div id="loader-bg"></div>
25</div>-->	
26<!-- gHeader -->
27<header id="gHeader"> 
28	<!-- gHeadeInner -->
29	<div id="gHeaderInner">
30    	
31	</div>
32    <!-- /gHeadeInner -->
33</header>
34<!-- /gHeader -->
35
36<!-- contents-->
37<article id="contents">
38	<section id="main">
39    </section>
40	
41	<section id="index_cont00">
42		
43    </section>
44
45	<section id="index_cont02">
46		
47     </section>
48	
49	<section id="index_cont03">
50		<div class="feature_list">
51			<dl>
52				<dt class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible) addHeight">
53					<img src="img/index/top01.png" alt="">
54				</dt>
55				<dd>AA</dd>
56			</dl>
57			<dl>
58				<dt class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible) addHeight">
59					<img src="img/index/top02.png" alt="">
60				</dt>
61				<dd>BB</dd>
62			</dl>
63			<dl>
64				<dt class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible) addHeight">
65					<img src="img/index/top03.png" alt="">
66				</dt>
67				<dd>CC</dd>
68			</dl>
69		</div>
70	</section>
71
72</article>
73
74<!-- gFooter -->
75<footer id="gFooter">
76<div class="copyright"><p>©2020 All Rights Reserved.</p></div>
77<!-- gFooter --></footer>
78
79<!-- スライダー -->
80<script src="js/swiper.min.js"></script>
81<script>
82		var mySwiper = new Swiper ('.swiper-container', {
83	    	loop: true,
84	    	slidesPerView: 'auto',
85  			spaceBetween: 0,
86  			centeredSlides : true,
87			autoplay:4500,
88			speed:800,
89			effect:'fade',
90		    pagination: '.swiper-pagination',
91		    nextButton: '.swiper-button-next',
92		    prevButton: '.swiper-button-prev',
93			disableOnInteraction: false,
94			paginationClickable: true,
95			breakpoints: {
96				767: {
97					slidesPerView: 1,
98					spaceBetween: 0
99				}
100				
101			}
102			
103	    })
104</script>	
105<script src="js/animsition.min.js"></script>
106<script>
107    $(function () {
108        $(".animsition").animsition();
109    });
110</script>
111<script src="js/ScrollTrigger.min.js"></script>
112<script>
113 document.addEventListener('DOMContentLoaded', function() {
114 var trigger = new ScrollTrigger();
115 });
116</script>	
117</body>
118</html>
119

CSS
1.invisible {
2    transition: opacity 0.5s ease;
3    opacity: 0.0;
4}
5 
6.visible {
7    transition: opacity 0.5s ease;
8    opacity: 1.0;
9}

試したこと

コンソールでエラーが出て、ScrollTriggerが動作しないため
他の記事を参照しながら

<script> document.addEventListener('DOMContentLoaded', function(){ ScrollTrigger.init(); }); </script>

ScrollTrigger.init();を　var trigger = new ScrollTrigger();に変更したのですが未だエラーが出る

index.html:398 Uncaught TypeError: ScrollTrigger is not a constructor
at HTMLDocument.<anonymous>

行動規範の内容に同意します

回答4件

ベストアンサー

READMEの履歴を見てみたところ、2016年8月ごろに仕様が変わっているようですね。
Added default options · terwanerik/ScrollTrigger@c3156ca · GitHub

ネットの情報は玉石混交で、間違っていたり、古かったりすることがあります。
最新の公式ドキュメントを読んでみてはいかがですか。

js
1// Create a new ScrollTrigger instance with default options
2const trigger = new ScrollTrigger()
3// Add all html elements with attribute data-trigger
4trigger.add('[data-trigger]')

ScrollTrigger - Let your page react to scroll changes

コメントを受けて追記

js
1// Create a new ScrollTrigger instance with default options
2const trigger = new ScrollTrigger() // When not using npm, create a new instance with 'new ScrollTrigger.default()'

GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.

とのことですから、new ScrollTrigger.default()とすればいいのではないでしょうか？

コメントを受けて追記2

Migrating from 0.x to 1.x | GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.
↑こちらの Another example for setting custom classes per toggle という一節をお読みいただければ、わかるのではないかと。

一応念のため、当方で動作したコードも置いておきます。（解決手段に書かれていた変更は元に戻してください）

js
1        const trigger = new ScrollTrigger.default()
2        trigger.add('[data-scroll]', {
3            once: true, // same functionality as the `once` flag in v0.x
4            offset: {
5                element: {
6                    y: 1.0 // note that we pass a float instead of an integer, when the
7                        // offset is a float, it takes it as a percentage, in this
8                        // case, add 100% of the height of the element, the same
9                        // functionality as the `addHeight` flag in v0.x
10                }
11            },
12            toggle: {
13                class: {
14                    in: 'bounceInDown',
15                }
16            }
17        });

コメントを受けて追記3

html
1        <div class="feature_list">
2            <dl>
3                <dt class="animated fast" data-scroll="bounceInDown">
4                    <img src="http://placehold.jp/1500x1500.png?text=img/index/top01.png" alt="">
5                </dt>
6                <dd>AA</dd>
7            </dl>
8            <dl>
9                <dt class="animated fast" data-scroll="fadeIn">
10                    <img src="http://placehold.jp/1500x1500.png?text=img/index/top02.png" alt="">
11                </dt>
12                <dd>BB</dd>
13            </dl>
14            <dl>
15                <dt class="animated fast" data-scroll="fadeInLeft">
16                    <img src="http://placehold.jp/1500x1500.png?text=img/index/top03.png" alt="">
17                </dt>
18                <dd>CC</dd>
19            </dl>
20        </div>

js
1        const trigger = new ScrollTrigger.default({
2            once: true, // same functionality as the `once` flag in v0.x
3            offset: {
4                element: {
5                    y: 1.0 // note that we pass a float instead of an integer, when the
6                        // offset is a float, it takes it as a percentage, in this
7                        // case, add 100% of the height of the element, the same
8                        // functionality as the `addHeight` flag in v0.x
9                }
10            },
11        });
12        trigger.add('[data-scroll=bounceInDown]', {
13            toggle: {
14                class: {
15                    in: 'bounceInDown',
16                }
17            }
18        });
19        trigger.add('[data-scroll=fadeIn]', {
20            toggle: {
21                class: {
22                    in: 'fadeIn',
23                }
24            }
25        });
26        trigger.add('[data-scroll=fadeInLeft]', {
27            toggle: {
28                class: {
29                    in: 'fadeInLeft',
30                }
31            }
32        });

訂正

js
1        const trigger = new ScrollTrigger.default({trigger:{
2            once: true, // same functionality as the `once` flag in v0.x
3            offset: {
4                element: {
5                    y: 1.0 // note that we pass a float instead of an integer, when the
6                        // offset is a float, it takes it as a percentage, in this
7                        // case, add 100% of the height of the element, the same
8                        // functionality as the `addHeight` flag in v0.x
9                }
10            },
11        }});

投稿2020/03/19 09:04

編集2020/03/25 03:17

Lhankor_Mhy

総合スコア36117

onakapecomaru

2020/03/24 01:37 編集

参考にしていた情報と最新のでは記述が違っていたのですね… ありがとうございます。ドキュメントを読んでみたのですが、恥ずかしながら勉強不足でいまいち配置方法がわからず、、よければご教授いただけますでしょうか

Lhankor_Mhy

2020/03/24 04:16

追記しました。

onakapecomaru

2020/03/24 05:17

var trigger = new ScrollTrigger.default();に書き換えをしたところ、スクロールし画面内に入ると動作するようにはなったのですが .invisibleの動きをするのみで使いたいanimate.cssのアニメーションが一切動かないです…

onakapecomaru

2020/03/24 08:00

書き換え後、アニメーションさせたい部分の文法を修正したら実行されました。お騒がせしました。

Lhankor_Mhy

2020/03/24 08:02

ご解決されて何よりです。

onakapecomaru

2020/03/24 08:35

何度も申し訳ございません。解決したかのように思えたのですが、スクロール関係なくアニメーションが動作してしまっているようで…

Lhankor_Mhy

2020/03/24 08:37 編集

なるほど。ちょっとお待ちください。当方の環境ですと、animate.css を見ることができないので……

Lhankor_Mhy

2020/03/24 08:53

追記しました。

onakapecomaru

2020/03/25 00:47 編集

お手数をおかけし申し訳ございません… 確かにこちらで動作はするのですが、これでしたらbounceInDownの動きのみとなってしまいますよね…？お聞きしてばかりで申し訳なく思いますが、急ぎの案件のためよければお手を貸していただけませんでしょうか。

Lhankor_Mhy

2020/03/25 00:30

もう少し詳しくお願いします。「bounceInDownの動きのみ」になるというご懸念がよくわかりません。

onakapecomaru

2020/03/25 00:44

言葉足らずですみません。もともとanimate.cssでは要素にclassを付けることでいろいろなアニメーションを実装できます。 https://github.com/daneden/animate.css いただいた内容だと、bounceInDownを直接付加することになるのでほかのclassを指定したとしても、すべて同じ動きになってしまうのです

onakapecomaru

2020/03/25 00:45

ポイントによってfadeInやfadeInLeftなどちがうアニメーションも使うことができるようにできればと思うのですが。。

Lhankor_Mhy

2020/03/25 00:51

classを分ければいいのではないかと思うのですが……？コードで書いた方がわかりやすいですよね。お待ちください。

Lhankor_Mhy

2020/03/25 01:16

追記しました。いずれにせよ、よくドキュメントをお読みになることをおすすめします。

onakapecomaru

2020/03/25 01:25

解決しました…ちゃんと読む前に急ぐあまり聞いてばかりで本当に申し訳ございませんでした。大変お世話になりました。ありがとうございます。

Lhankor_Mhy

2020/03/25 01:32

ご解決されて何よりです。

onakapecomaru

2020/03/25 03:07

あともう1点だけ、すみませんよろしいでしょうか… 1度のスクロールのみでアニメーションが動作するよう、クラスの付け替えは一度だけになるようにしたいのですがご教授いただけませんでしょうか。

Lhankor_Mhy

2020/03/25 03:17 編集

すいません、ちょっとコードを間違えていたようです。追記しました。

onakapecomaru

2020/03/25 04:10

何度も申し訳ございませんでした。助かりましたありがとうございます‼

行動規範の内容に同意します

アニメーションさせたい部分(修正前)

HTML
1class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible)

(修正後)

HTML
1class="animated fast　bounceInDown" data-scroll="once toggle(.animateIn, .invisible)

オプションの記述間違いでした。
new ScrollTrigger.default()に書き換え後、上記に修正したら動作確認できました。

投稿2020/03/24 08:33

onakapecomaru

総合スコア10

アニメーションさせたい部分(修正前)

HTML
1class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible)

(修正後)

HTML
1class="animated fast　bounceInDown" data-scroll="once toggle(.animateIn, .invisible)

オプションの記述間違いでした。
new ScrollTrigger.default()に書き換え後、上記に修正したら動作確認できました。

投稿2020/03/24 08:26

onakapecomaru

総合スコア10

アニメーションさせたい部分(修正前)

HTML
1class="animated fast" data-scroll="once toggle(.bounceInDown, .invisible)

(修正後)

HTML
1class="animated fast　bounceInDown" data-scroll="once toggle(.animateIn, .invisible)

オプションの記述間違いでした。
new ScrollTrigger.default()に書き換え後、上記に修正したら動作確認できました。

投稿2020/03/24 08:04

onakapecomaru

総合スコア10

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！