2017-05-08 59 views
0

多個時間表與tweenmax的onComplete功能scrollmagic scrollmagic多個時間軸沒有這個代碼scrollmagic控制器上工作在tweenmax的onComplete功能

.add(TweenLite.fromTo ('.title2' , 0.3, {css:{opacity:0}}, {css:{opacity:1},onComplete:function() { 
           function pathPrepare ($el) { 
            var lineLength = $el[0].getTotalLength(); 
            $el.css("stroke-dasharray", lineLength); 
            $el.css("stroke-dashoffset", lineLength); 
           } 
           var $word = $("polyline#svg_2"); 
           pathPrepare($word); 

           var tl1 = new TimelineLite() 
            .add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone,onComplete:function(){ 
             var tlbox = new TimelineLite() 
              .add(TweenLite.fromTo ('#grapher' , 0.3, {css:{opacity:0}}, {css:{opacity:1,display:'block'},onComplete:function() {}})) 
             var scene = new ScrollMagic.Scene() 
              .setTween(tlbox) 
              .addTo(controller); 
            }})) 
//         .add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); 
           var scene = new ScrollMagic.Scene({triggerElement: "#trigger4", duration: 300, offset: 0}) 
             .setTween(tl1) 
             .addTo(controller); 


          }}),0) 

不能正常工作,請幫我從這個

回答

0

試試這個沒有在Scrollmagic

0123添加時間軸補間的onComplete函數內部

var tl1 = new TimelineMax() 
.add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone,onComplete:function(){}})) 
.add(TweenLite.fromTo ('#grapher' , 0.3, {css:{opacity:0,display:'none'}}, {css:{opacity:1,display:'inline-block'},onComplete:function() {}})) 
var scene = new ScrollMagic.Scene({triggerElement: "#trigger4", duration: 300, offset: 0}) 
.setTween(tl1) 
.addTo(controller); 

GSAP動畫