tweenmax oncomplete函数中具有scrollmagic的多个时间轴

Question

multiple timeline with scrollmagic in tweenmax oncomplete function is not working

    .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 )

on this code scrollmagic controller is not working properly please help me from this

Answer 1

try this without adding timeline tweens inside onComplete function

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 Animation in Scrollmagic