пытается использовать staggerTo с GSAP

Question

Попытка получить мои изображения, чтобы начать снизу: 0 и непрозрачность 1 и пошатываться при использовании анимации грейзеров. Я не уверен, что я делаю неправильно, так как мой код выглядит валидным, возможно, я слишком долго смотрел на него.

Я предполагаю, что 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 (СКС) :

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

Примечание: Я завернут ваши JS в один второй тайм-аут, чтобы вы могли видеть элементы, помещенные на сцену перед анимацией пожаров.

Немного странно, что ваш компилятор sass не кричал на вас, говоря, что что-то не так.