Superscrollorama，TweenMax製作動畫播放，之後，繼續滾動

Question

有沒有辦法讓用戶滾動到某個點， 元素淡入， 後動畫（X2）播放（沒有用戶輸入） 之後，滾動觸發進一步的動畫，但只有動畫（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那個動畫你直接添加你想要發生的補間？

您可以在onComplete方法中嵌套另一個timelineLight，這樣您就可以對這些動畫進行排序，而無需擁有巨大的嵌套JQuery動畫組。

我也強烈建議不要將greensock和jQuery動畫混合在一起，它們給我造成了一場噩夢。