Множественная временная шкала со скроллмагией в твинемакс по неполной функции

Question

Множественная временная шкала со скроллмагией в tweenmax, не работает полная функция

    .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

Попробуйте это, не добавляя анимацию временной шкалы внутри функции 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 Анимация в Scrollmagic