Superscrollorama，TweenMax制作动画播放，之后，继续滚动

有没有办法让用户滚动到某个点，元素淡入，后动画（X2）播放（没有用户输入）之后，滚动触发进一步的动画，但只有动画（X2）已播放时才能触发这些动画。Superscrollorama，TweenMax制作动画播放，之后，继续滚动

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'}}) 
        ])

来源

2013-09-24 LexLusa

这真的看起来过于复杂。

我对此的思考过程中有一个引脚可以完成您的初始动画。

onComplete那个动画你直接添加你想要发生的补间？

您可以在onComplete方法中嵌套另一个timelineLight，这样您就可以对这些动画进行排序，而无需拥有巨大的嵌套JQuery动画组。

我也强烈建议不要将greensock和jQuery动画混合在一起，它们给我造成了一场噩梦。

来源

2013-10-15 17:22:26 James

Superscrollorama，TweenMax制作动画播放，之后，继续滚动

回答

相关问题