在一个场景中使用 ScrollMagic 触发多个元素答案

【问题标题】：Trigger multiple elements with ScrollMagic with one scene在一个场景中使用 ScrollMagic 触发多个元素
【发布时间】：2019-11-01 01:27:22
【问题描述】：

我正在使用 ScrollMagic 在元素进入屏幕后立即淡入，这很有效，但仅适用于第一个元素，但不会触发其余元素。我希望每个元素都被触发，并且只使用一个场景来执行此操作。

const controller = new ScrollMagic.Controller();

var scenefadein = new ScrollMagic.Scene({
	triggerElement: ".fade-in",
	triggerHook: 1,
	offset: 0,
  reverse: true
})
.setClassToggle(".fade-in", "visible")
.addTo(controller);

.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

【问题讨论】：

标签： javascript scrollmagic gsap

【解决方案1】：

我找到了使用 TweenMax 和 jQuery 的解决方案。

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.fade-in').each(function() {
  
  // build a tween
  var tween = TweenMax.from($(this), 0.7, {autoAlpha: 0, y: '+=200', x: '0', ease:Linear.easeNone});

  // build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
	triggerHook: 0.7,
	offset: 0,
  reverse: true
  })
  .setTween(tween)
  .addTo(controller);
  
});

.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>



<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

【讨论】：