TweenMaxを使って要素が可視範囲に入ったらフェードインさせたい

Question

要素が可視範囲に入ったらTweenMaxを発火させたいです。（ソースもなるべくスマートに）

「TweenMax スクロール」で調べるとScrollMagicとの併用が書かれた記事がありますが、
下記実装するとフェードインさせたい要素ごとに"move1""move2"とクラスを付けていき、jsの記述が膨大になってしまいます。

				<section>
					<div class="section-in">
						<ul>
							<li class="move1">フェードインで表示される</li>
							<li class="move1">フェードインで表示される</li>
							<li class="move1">フェードインで表示される</li>
						</ul>
					</div>
				</section>

				<section>
					<div class="section-in">
						<ul>
							<li class="move2">フェードインで表示される</li>
							<li class="move2">フェードインで表示される</li>
							<li class="move2">フェードインで表示される</li>
						</ul>
					</div>
				</section>

				<section>
					<div class="section-in">
						<ul>
							<li class="move3">フェードインで表示される</li>
							<li class="move3">フェードインで表示される</li>
							<li class="move3">フェードインで表示される</li>
						</ul>
					</div>
				</section>

  var controller = new ScrollMagic();
  var move1 = TweenMax.staggerFromTo(".move1", 1, {
    opacity: 0,
    y: 35
  }, {
    opacity: 1,
    y: 0
  }, 0.2);
  var scene = new ScrollScene({
      triggerElement: ".move1",
      reverse: false
    })
    .setTween(move1)
    .addTo(controller);

  var move1 = TweenMax.staggerFromTo(".move2", 1, {
    opacity: 0,
    y: 35
  }, {
    opacity: 1,
    y: 0
  }, 0.2);
  var scene = new ScrollScene({
      triggerElement: ".move2",
      reverse: false
    })
    .setTween(move2)
    .addTo(controller);

});

以下続く

jsの記述をもっとスマートにするため、ScrollMagicは使わず、下記実装しようとしたのですが、動作せず。。。。

				<section>
					<div class="section-in">
						<ul>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
						</ul>
					</div>
				</section>

				<section>
					<div class="section-in">
						<ul>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
						</ul>
					</div>
				</section>

				<section>
					<div class="section-in">
						<ul>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
							<li class="move">フェードインで表示される</li>
						</ul>
					</div>
				</section>

$(window).scroll(function (){
　　　　　　　var animationFlag = false;
			$("section").each(function(){
				var imgPos = $(this).offset().top;
				var scroll = $(window).scrollTop();
				var windowHeight = $(window).height();
				if (scroll > imgPos - windowHeight + windowHeight - 300){
　　　　　　　　　　if(!animationFlag) {
                　　　animationFlag = true;
						TweenMax.staggerFromTo(".move", 1, {
							opacity: 0,
							x: -35
						}, {
							delay: 0.8,
							opacity: 1,
							x: 0
						});
				　　　}
　　　　　　　　　　　　}
			});
		});

解決方法のご教示をお願いいたします！

Answer 1

見た所、毎回同じアニメーションのようなので、ScrollMagicとTweenMaxに関わる共通処理を関数化するといいと思います。

以下、コードの参考です。

var controller = new ScrollMagic();

function createScene(selector) {
  var tween = TweenMax.staggerFromTo(selector, 1, {
    opacity: 0,
    y: 35
  }, {
    opacity: 1,
    y: 0
  }, 0.2);

  var scene = new ScrollScene({
    triggerElement: selector,
    reverse: false
  })
    .setTween(tween)
    .addTo(controller);

  return scene; // 一応、処理した値を取得できるようにreturnしています
}

var scene1 = createScene(".move1");
var scene2 = createScene(".move2");
// 以下繰り返し宣言する...

もし最後の宣言部分をさらにまとめたければ、for文かArray.prototype.forEach()メソッドで複数のセレクタに対して処理を繰り返すのもいいと思います。

// for文で .move1 から .move10 までのセレクタを処理する場合
for (var i = 1; i < 11; i++) {
  createScene(".move" + i); // ループ毎に ".move1", ".move2", ... となる
}

// Array.prototype.forEach()で、好きなセレクタを繰り返し処理する場合
var selectors = [
  ".move1",
  ".move2",
  ".move3",
  ".other-selector"
]

selectors.forEach(function(selector) {
  createScene(selector);
});

もし、セレクタ毎にアニメーションを変えたいなどの要望が出てきたらcreateScene()関数の引数を増やして、処理を少しかえれば対応できます。

下記のコードは、アニメーションの秒数をセレクタ毎に変える場合の参考です。

var controller = new ScrollMagic();

function createScene(selector, duration) {
  var tween = TweenMax.staggerFromTo(selector, duration, {
    opacity: 0,
    y: 35
  }, {
    opacity: 1,
    y: 0
  }, 0.2);

  var scene = new ScrollScene({
    triggerElement: selector,
    reverse: false
  })
    .setTween(tween)
    .addTo(controller);

  return scene; // 一応、処理した値を取得できるようにreturnしています
}

var scene1 = createScene(".move1", 1);
var scene2 = createScene(".move2", 2);

反復処理する場合は、以下のようにするのがひとつの手段です。

var sceneOptions = [
  { selector: ".move1", duration: 1 },
  { selector: ".move2", duration: 2 },
  { selector: ".move3", duration: 3 },
  { selector: ".other-selector", duration: 4 }
]

sceneOptions.forEach(function(sceneOption) {
  createScene(
    sceneOption.selector, 
    sceneOption.duration
  );
});

もちろん、createScene(options)のように、引数をひとつのオブジェクトにして、関数の中でTweenMax.staggerFromTo(options.selector)と展開してもいいです。引数で指定したい変数が増えてきたらオブジェクトにした方がいいと思います。

---

2019/04/26 追記

ScrollMagicのtriggerElementはCSSセレクタではなくHTML要素(Element)そのものを指定することができます。また、TweenMax.staggerFromTo()の第1引数も、CSSセレクタではなく、HTML要素(Element)の配列を指定することができます。

それぞれに別々のクラスを付与するのではない場合、特定のクラスがついている要素を取得して反復処理をすればいいです。

以下、jQueryを使用した場合の参考です。

var controller = new ScrollMagic();

function createScene(element) {
  var tween = TweenMax.staggerFromTo([ element ], 1, {
    opacity: 0,
    y: 35
  }, {
    opacity: 1,
    y: 0
  }, 0.2);

  var scene = new ScrollScene({
    triggerElement: element,
    reverse: false
  })
    .setTween(tween)
    .addTo(controller);

  return scene; // 一応、処理した値を取得できるようにreturnしています
}

// 特定のCSSクラスを持つ要素のjQueryオブジェクトを取得
var $targets = $('.move');

// jQueryの`each()`メソッドで、要素一つ一つを処理
$targets.each(function() {
  // このfunctionの中で`this`は'move'クラスを持つ要素です
  createScene(this);
});

ところで、複数の要素を連続してアニメーションさせるのでなく、それぞれ独立して動かすのであれば、TweenMax.staggerFromTo()ではなくて、TweenMax.fromTo()でよいのではないですか？
（注：TweenMax.fromTo()の場合は、要素の配列ではなく、要素を指定します）

Comments

[hayakawatakuma]

ご回答ありがとうございます！
JSの記述は短くなったのですが、
やはり同じ動きだとしてもmove1、move2 ・・・とclass名が増えてくるのがちょっと。。。

1つのクラスだけでなんとかできないでしょうか？

下記サイトの様にclassに「js-scrollShow」を指定してあげれば
tweenmaxが発火する様なイメージです。
http://goodlife-inc.co.jp/

[hayakawatakuma]

ご丁寧にありがとうございます！
希望とする挙動となりました！

[NozomuIkuta]

解決したようで良かったです。