Superscrollorama, TweenMax 애니메이션을 재생 한 다음 스크롤을 다시 시작합니다.

Question

사용자가 특정 지점으로 스크롤 할 수있게 해주는 방법이 있습니까? 이후에 요소가 사라집니다 (사용자 입력없이) 이후 스크롤을하면 더 많은 애니메이션이 트리거되지만 애니메이션 (X2)이 재생 된 경우에만 트리거 될 수 있습니다.

var controller = $.superscrollorama({ 
      triggerAtCenter: false 
     }); 
      // set duration, in pixels scrolled, for pinned element 
       var pinDur = 2800; 

       // create animation timeline for pinned element 
       var pinAnimations = new TimelineLite(); 
       pinAnimations 
        .append([ 
         TweenMax.to($('#mouse_walk'), 5, {css:{opacity: 1}, 
          onComplete: function(){ 
           $("#mouse_walk, #mouse_walk img").stop().animate({height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){ 
            $("#mouse_walk, #mouse_walk img").stop().animate({height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){ 
             $("#mouse_walk, #mouse_walk img").stop().animate({height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){ 
              $("#mouse_walk, #mouse_walk img").stop().animate({height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){ 
               setTimeout(function() { 
                 $("#mouse_walk, #mouse_walk img").stop().animate({height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){ 
                  $("#mouse_walk, #mouse_walk img").stop().animate({height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){ 
                   $("#mouse_walk, #mouse_walk img").stop().animate({height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){ 
                    $("#mouse_walk, #mouse_walk img").stop().animate({height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){ 
                    }) 
                   }) 
                  }) 
                 }) 
                }, 800); 
                }) 
               }) 
              }) 
             }); 
            } 
           } 
          ) 
         ]) 
        .append([ 
         TweenMax.to($('#mouse_walk_hell'), 5, {css:{opacity: '1'}}) 
        ]) 

Answer 1

이것은 실제로 지나치게 복잡해 보입니다.

내 생각에는이 과정에서 초기 애니메이션을 만드는 핀이 있습니다.

해당 애니메이션의 전체 완성으로 트위터를 직접 추가 하시겠습니까?

다른 타임 라인을 onComplete 메서드 안에 중첩시킬 수 있으므로 거대한 중첩 된 JQuery 애니메이션 그룹을 사용하지 않고 애니메이션을 시퀀스 할 수 있습니다.

또한 greensock과 JQuery 애니메이션을 함께 사용하지 않는 것이 좋습니다. 그들은 나에게 악몽을 불러 일으켰습니다.