多个时间轴与 TWEENMAX 中的滚动魔术完成功能

Question

补

间中带有 scrollmagic 的多个时间线 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 )

在此代码上，ScrollMagic控制器无法正常工作，请从中帮助我

Answer 1

尝试此操作而无需在完整函数中添加时间线补间

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动画