TweenMaxとScrollMagicを使って、同クラスの複数の要素にそれぞれアニメーションをつけたい

Question

TweenMaxとScrollMagicを仕様して、次のような動きを実現させたいです。

一つ目のul.elem
<ul class="elem">
	<li>aaa</li>
	<li>iii</li>
	<li>uuu</li>
	<li>eee</li>
	<li>ooo</li>
</ul>

二つ目のul.elem
<ul class="elem">
	<li>あああ</li>
	<li>いいい</li>
	<li>ううう</li>
	<li>えええ</li>
	<li>おおお</li>
</ul>

上記のように同じクラスをもつ複数の要素について、
それぞれのul.elem要素がスクロールインした時、その子要素liに表示アニメーションをつけたいと考えています。
現在下記のように記述しているのですが、こちらだと、一つ目のul.elemが可視範囲に入った際に
二つ目のul.elemも連動してアニメーションが始まってしまいます。

const controller = new ScrollMagic.Controller();

$('.elem').each(function(){
 var list = $(this).children();
   //Tween作成
    const tween = TweenMax.staggerFromTo(list, 1, {
    opacity: 0,
    x: 30
  }, {
    opacity: 1,
    x: 0
  }, 0.2);

    //シーンを作成
    const scene = new ScrollMagic.Scene({
        triggerElement: this,
        triggerHook: 1
    })
    .setTween(tween) //trigger a TweenMax tween
    .addTo(controller)
    .addIndicators();
});

どのように修正すれば、想定の動きになるでしょうか。
ご教授いただきたく、よろしくお願いいたします。

Answer 1

現状だと変数listに複数のliがまとめて格納されているような実装なので、一気にまとめてアニメーションが効いてしまうのだと思われます。

それぞれのliをループで回すなどして各要素に設定すればうまくいくような気がします。

scroll magicでの実装ではないですが
画面内に入ったことを検知してアニメーションさせるだけであれば下記のような方法でも実現できそうです
https://www.gipservice.com/blog/0930/

Comments

[tekumak]

返信が遅くなり申し訳ございません。
scroll magicは使わず、ご提示いただいたページを参考に実装いたしました。
ありがとうございました。