GSAPでstaggerToを使用しようとしています

Question

私の画像を下から開始しようとしました：0と不透明度1、そしてgreensockアニメーションを使用しています。私のコードが良かったように私は何が間違っているのかわからない、多分私はそれをあまりにも長く注視していたかもしれない。

find（）が私の中にすべてのimg要素を持つオブジェクトを見ていないようにしたいと思っています。ここで

は私のコンソールが出力されているものである：ここでは

[prevObject: jQuery.fn.init[0], context: document] 

は私のスクリプトです：ここでは

$(document).ready(function(){ 
    var mainText = $('ul.images li').find('img'); 
    console.log(mainText); 
    var tween = TweenMax.staggerTo(mainText, 0.75, { 
     opacity: '0', 
     bottom: '300px', 
     left: '50%' 
    }, 0.3); 
}); 

は私のhtmlです：ここでは

<ul class="images"> 
     <li class="image brain"><img src="img/science/brain.svg" class="img brain" alt="cell-watermark-bg"></li> 
     <li class="image mitochondria"><img src="img/science/mitochondria.svg" class="img mitochondria" alt="cell-watermark-bg"></li> 
     <li class="image microscope"><img src="img/science/microscope.svg" class="img microscope" alt="cell-watermark-bg"></li> 
     <li class="image scientist"><img src="img/science/scientist.svg" class="img scientist" alt="cell-watermark-bg"></li> 
     <li class="image beaker"><img src="img/science/beaker.svg" class="img beaker" alt="cell-watermark-bg"></li> 
     <li class="image beaker-2"><img src="img/science/beaker-2.svg" class="img beaker-2" alt="cell-watermark-bg"></li> 
     <li class="image atom"><img src="img/science/atom.svg" class="img atom" alt="cell-watermark-bg"></li> 
     <li class="image dropper"><img src="img/science/dropper.svg" class="img dropper" alt="cell-watermark-bg"></li> 
     <li class="image dna"><img src="img/science/dna.svg" class="img dna" alt="cell-watermark-bg"></li> 
    </ul> 

は私のCSS（SCSS）であります：

ul.images { 
     position: relative; 
     .image { 
      position: relative; 
      width: 100%; 
      .img { 
       position: absolute; 
       height: 50px; 
       opacity: 1; 
       -webkit-transition: background-color 0.2s ease; 
       -moz-transition: background-color 0.2s ease; 
       -o-transition: background-color 0.2s ease; 
       transition: background-color 0.2s ease; 
       &.dna { 
        bottom: -40px; 
        left: -30%; 
       } 
       &.scientist { 
        bottom: 40px; 
        left: -40%; 
       } 
       &.atom { 
        bottom: -60px; 
        left: 60%; 
       } 
       &.cell { 
        bottom: -90px; 
        left: -96px; 
       } 
       &.brain { 
        bottom: -130px; 
        left: 250px; 
       } 
       &.dropper { 
        bottom: -120px; 
        left: -20%; 
       } 
       &.beaker { 
        bottom: -60px; 
        left: 15%; 
       } 
       &.beaker-2 { 
        bottom: -100px; 
        left: 100%; 
       } 
       &.mitochondria { 
        bottom: -40px; 
        left: 120%; 
       } 
       &.microscope { 
        bottom: 45px; 
        left: 110%; 
       } 
      } 
     } 

Answer 1

あなたのscssに問題がありました。 ul.images{...}は実際に閉じられていませんでした。私はそれを閉じて、あなたの質問を理解するアニメーションが動作するように見えます。

Codepen here

注：アニメーション火災の前にステージ上に配置要素を見ることができるように、私は1秒間のタイムアウトにあなたのjsを包みました。

あなたのサスのコンパイラが何か間違っていると言って叫んでいないのは少し奇妙です。