staggerTo kullanarak kullanmak için GSAP ile

Question

Resimlerimi en baştan başlamak için çalışıyor: 0 ve opaklık 1 ve greenreens animasyon kullanarak stagger. Kodumun doğru göründüğü gibi yanlış yaptığımdan emin değilim, belki çok uzun süre bakıyorum.

Bul(), içindeki tüm img öğeleriyle bir nesneyi görmemi istemediğim şekilde çalışmıyorum. İşte

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

benim Senaryo ise: İşte

<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> 

benim css (SCSS) 'dir:

İşte

$(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); 
}); 

Benim html İşte

benim konsol çıkışı budur :

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

Sorun, scss'inizdeydi. ul.images{...} aslında kapalı değildi. Onu kapattım ve animasyonu, sorunuzu anladığım kadar işe yarayacak gibi görünüyor.

Codepen here

Not: animasyon yangınları önce sahneye yerleştirilen elemanlar görebilirsiniz yüzden bir tane ikinci zaman aşımı halinde js sarılmış ettik.

Sass derleyicinizin size yanlış bir şey olduğunu söyleyerek bağırmamasının biraz garip gelmesi.