[Loading HTML with AJAX and killing tweens]

I have built a single page app using jQuery .load() to read the url and fetch the according html snipped which contains the SVG's (which are pretty large).

 

function loadPage(page){
    var pageString = `./views/${page}.html`;
    $('#content').fadeOut('normal', function() {
        $(this).load(pageString, (res, status, xhr) => {
            $(this).fadeIn('normal', () => {
                if(page === 'self-service'){
                    selfService.init();
                } else {
                    publicSafety.init();
                }
            });
        });
    });
}

 

Once the html has been loaded onto the page I am calling a init() function which starts my MainTimeline for each page.  

function init() {
        console.log('self service init');


        MainTL
            .add(IconIntro(), 'intro-icon')
            .add(DataFlow(), 'intro-icon+=4')
    }

 

Here I have added a couple timelines to MainTimeline.  When I am leaving the page I kill() all the active timelines so they are no longer playing with a killTL() function.  

 

function killTL(){
        MainTL.kill();
        var timelines = [iconIntroTL, dataFlowTL];
        for (var i = 0; i < timelines.length; i++) {
            clearProps(timelines[i]);
        }
    }

 

The pages load very quickly on first load, but the problem arises when switching back to a page that has already been loaded once.  There is a long delay between the loading of the html/init function and then the playing of the animation.  

 

The demo is scaled back quite a bit, but there are more pages and timelines that are being added and the delay is about 5 seconds each time.  I cannot figure out whats going on as I have tried many combinations of .pause(), restart(), kill() ect..  Is greensock just taking along time to parse the html that was loaded from a ajax call? 

 

Thanks for any help and the project is attached.  

 

//"npm install" and "gulp" 

 

 

 

 

ajax-greensock.zip