TweenMax.to 지연으로 애니메이션하는 방법?

Question

TweenMax를 사용하여 div를 100 % 너비의 부모에서 0으로 애니메이션하는 애니메이션을 만들었습니다. 서로 옆에 세 개의 div가 있으며 아래에 이미지가 겹칩니다. 이제는 각각 preload div 클래스가 이전 클래스가 트리거 된 후 몇 초간 시작되기를 바랍니다.

나는 setTimeout과 같은 것을 시도하지만, 작동시키지 못했습니다. 어떻게하면 좋을까요?

CodePen는 : https://codepen.io/anon/pen/aWVZXL

Answer 1

나는 스크립트를 변경했습니다. 원하면 리팩토링하십시오.

$(document).ready(function() { 
var toBeAnimated; 
var currentAnimat = 0; 

$('.link').click(function() { 
    toBeAnimated = $(".preloader"); 
    console.log('lets start animation'); 
    preload(toBeAnimated[currentAnimat]); 
}); 

function preload(elem) { 
    var elem = $(elem); 
    var width = elem.outerWidth(); 
    // Tween out preload div 
    TweenMax.to(elem, 1.4, { 
     width: 0, 
     right: 0, 
     onComplete: function() { 
      elem.remove(); 
      currentAnimat++; 
      if(currentAnimat >= toBeAnimated.length) { 
       console.log('Animation done'); 
      } else { 
       preload(toBeAnimated[currentAnimat]); 
      } 
     } 
    }); 
} 

});