ScrollTrigger.jsとJQUERYアコーディオンを併用したい

Question

症状

参考サイトの内容をJQUERYアコーディオンの要素内で実装したところ
アコーディオンの展開に合わせて、すべての要素がアニメーションしてしまい、
スクロールで画面を下がった頃には、アニメーションしなくなっており困っています。

参考サイト：https://prokatsu.com/animate_scroll/

設定の背景

LINEトーク風のコンテンツを実装するために参考サイトの内容を採用しました。
しかし、トークコンテンツが長いため後半をアコーディオンで折りたたむ事になりました。
且つ、スクロールを戻ったときに、再度アニメーションが起こらないよう、一度だけアニメーションする設定を行いました。

理想の完成状態

１．アコーディオン展開後もコンテンツはスクロールに合わせてアニメーションしてほしい。
２．一度アニメーションした要素はスクロールを戻ってもアニメーションしない状態を保ちたい。
以上です。

賢者の方々へ

当方初心者のため、「〇〇が原因だから、〇〇したら解決するんじゃない？」といったご指導が理解できない場面がございます。
できれば、改変後のコードを貼り付けてご指導いただけると幸いです。

また、「ページを分ければ・・・」や「そもそものUI設計がダメじゃない・・・」など、
現在の設定を変えるようなご指導には、対応できない事情にございますので、ご了承いただけますと幸いです。

資料データ

こちらからダウンロード可能です

Comments

[m.ts10806]

これでは作業依頼です。質問の仕方を改めたほうが宜しいかと。「自分で書いたコードなのにあまり理解できていない状況」ですよね。

[m.ts10806]

質問者さんが求めているのは「赤の他人が書いたよくわからないコード」です。作業依頼ならともかく、理解される見込みが薄いコードを提示したい人がいるでしょうか？（しかもそこそこのコード量）

[退会済みユーザー]

mts10806様　この度は不快な質問を投稿し申し訳ありません。この投稿は解決とし、終了しました。

[m.ts10806]

不快とは言っていません。どのようなサービスにもルールというものがありますし、そのルールに沿っているかどうかを淡々と指摘しただけです。既に退会されてますが、この指摘のみで退会されるほうが私としては「不快」ですね。解決する気がないならなぜ質問したんだろう、というところです。

Answer 1

不適切な質問でしたので、解決とし終了させていただきます。