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
