javascript - 呼び出される前に実行中のjQuery関数

Question

次々に呼び出したい関数が 2 つあります。最初の関数は正常に実行されますが、2 番目の関数は呼び出される前でも実行されます。これを防ぐ方法はありますか？最初の関数は scrollAnimation() と呼ばれ、2 番目の問題は footerAnimation と呼ばれます。ありがとう！

$(document).ready(function() {
        $('#mainGraphic').css('visibility','hidden');

        (new TimelineLite({onComplete:scrollAnimation}))
                .from( $('#header'), 1, {css:{opacity:'0'}})
                .from( $('#fade-headerText'), .7, {css:{bottom:'1000px', opacity:'0'}, ease:Back.easeOut})
                .from( $('#boxQ'), .7, {delay: 1, css:{opacity:'0'}})
                .from( $('#boxS'), .7, {css:{opacity:'0'}})
                .from( $('#boxSim'), .7, {css:{opacity:'0'}})

                function scrollAnimation() {
                    $('#mainGraphic').css('visibility','visible');

                    var controller = $.superscrollorama();


                    controller.addTween('#graphicOne', TweenMax.from( $('#graphicOne'), 1, {css:{right:'1000px', opacity:'0'}, ease:Back.easeOut}));
                    controller.addTween('#graphicTwo', TweenMax.from( $('#graphicTwo'), 1, {css:{left:'1000px', opacity:'0'}, ease:Back.easeOut})); 
                    controller.addTween('#graphicThree', TweenMax.from( $('#graphicThree'), 1, {css:{right:'1000px', opacity:'0'}, ease:Back.easeOut}));

                    footerAnimation();  

                }

                function footerAnimation() {
                    TweenMax.to( $('#footerTextLight'), .7, {delay: 2, css:{opacity:'1'}})
                    TweenMax.to( $('#footerTextDark'), .7, {delay:2, css:{opacity:'1'}})
                }
    });