Performance problems with edge animate website and lagging animations

[akadigital]

Hi Everyone,
 
I've created an edge animate website with 4 sections. Each section has some sort of simple animation to bring in content. The problem that I have is that when the user clicks on the navigation more than say 10-15 times the pages start seriously lagging until the page becomes unresponsive and crashes. I am testing this currently in Chrome and edge in IE.
 
I have stripped this website right down to the bare bones and changed properties from Left and top to x and y and removed background images to see whether these things are causing the problem but the problem still persists. Here is the website and below is example code. Any help would be appreciated thank you.
 
http://digital.akauk.com/_test/gsap/website/superhero.html
 
Website code:

// ----------------------------------------- SET VARIABLES ------------------------------------------------------- //
TweenMax.defaultEase = Power2.easeInOut;

// Stage dimensions
var stageHeight = sym.$("Stage").height();
var stageWidth = sym.$("Stage").width();

var mainNavWidth = $("#Stage_mainNav").width();
var footerWidth = $("#Stage_footer").width();
var sHomeWidth = $("#Stage_sHome").width();
var sAboutWidth = $("#Stage_sAbout").width();
var sVideoWidth = $("#Stage_sVideo").width();
var sGalleryWidth = $("#Stage_sGallery").width();

sym.$("#Stage_mainNav").css({
"left": stageWidth/2 - mainNavWidth/2
});

sym.$("#Stage_footer").css({
"left": stageWidth/2 - footerWidth/2
});

sym.$("#Stage_sHome").css({
"left": stageWidth/2 - sHomeWidth/2
});

sym.$("#Stage_sAbout").css({
"left": stageWidth/2 - sAboutWidth/2
});

sym.$("#Stage_sVideo").css({
"left": stageWidth/2 - sVideoWidth/2
});

sym.$("#Stage_sGallery").css({
"left": stageWidth/2 - sGalleryWidth/2
});

// Background images
sym.$("body").css({
"overflow-x" : "hidden" // Stop horizontal scrollbar
});

var homeImage = sym.$("homeImage");
var aboutImage = sym.$("aboutImage");
var videoImage = sym.$("videoImg");
var galleryImage = sym.$("galleryImage");

homeImage.css({
"background-attachment": "fixed",
"background-size": "cover",
"-webkit-background-size": "cover",
"background-position": "50% 50%",
"background-repeat" : "no-repeat"
});

aboutImage.css({
"background-attachment": "fixed",
"background-size": "cover",
"-webkit-background-size": "cover",
"background-position": "50% 50%",
"background-repeat" : "no-repeat"
});

videoImage.css({
"background-attachment": "fixed",
"background-size": "cover",
"-webkit-background-size": "cover",
"background-position": "50% 50%",
"background-repeat" : "no-repeat"
});

galleryImage.css({
"background-attachment": "fixed",
"background-size": "cover",
"-webkit-background-size": "cover",
"background-position": "50% 50%",
"background-repeat" : "no-repeat"
});


// Main section containers
var sHome = sym.$("sHome");
var sAbout = sym.$("sAbout");
var sVideo = sym.$("sVideo");
var sGallery = sym.$("sGallery");

var firstPlay = true;

// Home section
var flyingBoy = sym.getSymbol("sHome").$("flyingBoy");
var Logo = sym.getSymbol("sHome").$("Logo");
var homeImage = sym.$("homeImage");
var playerBg = sym.getSymbol("sHome").$("playerBg");
var footer = sym.$("footer");
var mainNav = sym.$("mainNav");
var buyNowBtn = sym.getSymbol("footer").$("buyNowBtn");
var facebookBtn = sym.getSymbol("mainNav").$("facebookBtn");
var twitterBtn = sym.getSymbol("mainNav").$("twitterBtn");

var animateFlyingBoy = new TweenMax(flyingBoy, 1.5, {paused:true, top:"56px", repeat:-1, yoyo:true, repeatDelay:0, ease:Linear.easeNone});

// About section
var aboutImage = sym.$("aboutImage");
var aHeading = sym.getSymbol("sAbout").$("aHeading");
var text = sym.getSymbol("sAbout").$("Text");
var logo2 = sym.getSymbol("sAbout").$("logo2");

// Video section
var videoImg = sym.$("videoImg");
var videoHeading = sym.getSymbol("sVideo").$("videoHeading");
var videoLogo = sym.getSymbol("sVideo").$("videoLogo");
var videoBtnLeft = sym.getSymbol("sVideo").$("arrowL");
var videoBtnRight = sym.getSymbol("sVideo").$("arrowR");
var videoThumbsContainer = $("#Stage_sVideo_containerHolder");

// Gallery section
var aImagesGallery = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", "images/img4.jpg", "images/img5.jpg", "images/img6.jpg"];
var totalImagesGallery = aImagesGallery.length;
var slideToGallery = 0;
var imageWidthGallery = 944;

var tGallery;
var arrowRGallery = sym.getSymbol(sGallery).$("arrowR");
var arrowLGallery = sym.getSymbol(sGallery).$("arrowL");
var containerGallery = sym.getSymbol(sGallery).getSymbol("containerHolder").$("container");

// Main nav button colours
var bSelected = "#a21111";
var bNormal = "#ffffff";

// Main Nav Buttons
var bHome = sym.getSymbol("mainNav").$("homeBtn");
var bAbout = sym.getSymbol("mainNav").$("aboutBtn");
var bVideo = sym.getSymbol("mainNav").$("videoBtn");
var bGallery = sym.getSymbol("mainNav").$("galleryBtn");

// Gallery
var nextImage_btn = sym.getSymbol(sGallery).$("btnNext");
var prevImage_btn = sym.getSymbol(sGallery).$("btnPrevious");
var imageCount = 1;

// Video
var t; // Thumb reference
var arrowR = sym.getSymbol(sVideo).$("arrowR");
var arrowL = sym.getSymbol(sVideo).$("arrowL");
var container = sym.getSymbol(sVideo).getSymbol("containerHolder").$("container");
var containerHolder = sym.getSymbol(sVideo).$("containerHolder");

var closeVideoBtn = sym.getSymbol(sVideo).$("closeVideoBtn");

var currentSection = "home"; //the section you are currently on
var nextSection; //the section you are navigation to

// Initialise call
initialise();

// ---------------------------------------- INITIALISATION ----------------------------------------------- //

function initialise()
{
//console.log("initialise");
enableNav();
initialStates();
prepPosAlpha();
showHomeSection();
disableNavElement(bHome);
} // end initialise();

function initialStates() {
//console.log("initialStates");

// Home section
flyingBoy["origX"] = flyingBoy.position().left;
Logo["origY"] = Logo.position().top;

playerBg["origY"] = playerBg.position().top;

// About section
aHeading["origY"] = aHeading.position().top;
text["origY"] = text.position().top;
aboutImage["origX"] = aboutImage.position().left;

// Video section
videoHeading["origY"] = videoHeading.position().top;
containerHolder["origY"] = containerHolder.position().top;
videoBtnLeft["origX"] = videoBtnLeft.position().left;
videoBtnRight["origX"] = videoBtnRight.position().left;

// Gallery section
arrowRGallery["origX"] = arrowRGallery.position().left;
arrowLGallery["origX"] = arrowLGallery.position().left;
containerGallery["origX"] = containerGallery.position().left;

} // end initialStates();

function prepPosAlpha(){
//console.log("prepPosAlpha");

// Prep home
flyingBoy["offStageX"] = "-500px";
TweenMax.set(flyingBoy, {scale:0, opacity:0, x:flyingBoy["offStageX"]});
TweenMax.set(Logo, {scale:2, opacity:0});
TweenMax.set(playerBg, {y: playerBg["origY"] + 25, opacity:0});
TweenMax.set(homeImage, {opacity:0});

// Prep About
TweenMax.set(aboutImage, {opacity:0});
TweenMax.set(aHeading, {opacity:0, y:aHeading["origY"] + 25});
TweenMax.set(text, {opacity:0, y:text["origY"] + 25});
TweenMax.set(logo2, {opacity:0, scale:2});

// Prep video
TweenMax.set(videoImg, {opacity:0});
TweenMax.set(videoHeading, {opacity:0, y:videoHeading["origY"] + 25});
TweenMax.set(videoLogo, {opacity:0, scale:2});
TweenMax.set(videoBtnLeft, {opacity:0, x:videoBtnLeft["origX"] + 125});
TweenMax.set(videoBtnRight, {opacity:0, x:videoBtnRight["origX"] - 125});
TweenMax.set(containerHolder, {opacity:0, y:containerHolder["origY"] + 25});

// Prep Gallery
TweenMax.set(arrowLGallery, {x:arrowLGallery["origX"] - 125, opacity:0});
TweenMax.set(arrowRGallery, {x:arrowRGallery["origX"] + 125, opacity:0.5});
TweenMax.set(containerGallery, {x:containerGallery["origX"], opacity:0});

// Hide sections
TweenMax.set([sHome, sAbout, sGallery, sVideo], {visibility:"hidden"});
}

// Show section functions
function showNextSection()
{

if(nextSection == "home"){
showHomeSection();
}

if(nextSection == "about"){
showAboutSection();
}

if(nextSection == "videos"){
showVideoSection();
}

if(nextSection == "gallery") {
showGallerySection();
}

} // end showNextSection();

function showHomeSection(){
introHome();
currentSection = "home";
}

function showAboutSection(){
introAbout();
currentSection = "about";
}

function showVideoSection(){
introVideo();
currentSection = "videos";
}

function showGallerySection(){
introGallery();
currentSection = "gallery";
}

// ----------------------------------------- RESET SECTIONS ------------------------------------------------------- //

function resetCurrentSection()
{
// console.log("resetCurrentSection");
// Reset sections by moving objects to original positions
if(currentSection == "home") { resetHomeSection(); return; }
if(currentSection == "videos") { resetVideoSection(); return; }
if(currentSection == "about") { resetAboutSection(); return; }
if(currentSection == "gallery") { resetGallerySection(); return; }
} // end resetCurrentSection()

function resetHomeSection()
{
// Pause video player
//player.pauseVideo();
// Pause tweening boy
animateFlyingBoy.pause();
// Hide player

// Reset elements for homesection
TweenMax.set(homeImage, {opacity:0});
TweenMax.set(Logo, {scale:2, opacity:0});
TweenMax.set(playerBg, {opacity:0, y:playerBg["origY"] + 25});
TweenMax.set(flyingBoy, {scale:0, opacity:0, x:flyingBoy["offStageX"]});
hideSections();
} // end resetHomeSection()

function resetAboutSection()
{
// Send scrollbar to page top
TweenMax.set(aboutImage, {opacity:0});
TweenMax.set(aHeading, {opacity:0, y:aHeading["origY"] + 25});
TweenMax.set(text, {opacity:0, y:text["origY"] + 25});
TweenMax.set(logo2, {opacity:0, scale:2});
hideSections();
} // end resetAboutSection()

function resetVideoSection()
{
// Stop video player
//fullscreenplayer.stopVideo();
// Hide videoplayer
//$("#Stage_sVideo_fullscreenplayer").hide();
// Hide close button
closeVideoBtn.hide();
// Show video buttons
videoBtnRight.show();
videoBtnLeft.show();
// Reset objects
TweenMax.set(videoImg, {opacity:0});
TweenMax.set(videoHeading, {opacity:0, y:videoHeading["origY"] + 25});
TweenMax.set(videoLogo, {opacity:0, scale:2});
TweenMax.set(videoBtnLeft, {opacity:0, x:videoBtnLeft["origX"] - 125});
TweenMax.set(videoBtnRight, {opacity:0, x:videoBtnRight["origX"] + 125});
TweenMax.set(containerHolder, {opacity:0, y:containerHolder["origY"] + 25});
TweenMax.set(container, {x:0});
slideTo = 0;

videoBtnLeft.hide();
hideSections();
} // end resetVideoSection()

function resetGallerySection()
{
// Reset arrows
TweenMax.set(arrowLGallery, {left:arrowLGallery["origX"] - 125, opacity:0});
TweenMax.set(arrowRGallery, {left:arrowRGallery["origX"] + 125, opacity:0});
// Reset gallery
slideToGallery = 0;
// Reset containerGallery
TweenMax.set(containerGallery, {left:containerGallery["origX"], opacity:0});
hideSections();

arrowLGallery.hide();
arrowRGallery.show();

} // end resetGallerySection()

// --------------------------------------- HIDE SECTIONS ------------------------------------------------------- //

function hideSections(){
// Hide Sections
TweenMax.set([sHome, sAbout, sGallery, sVideo], {visibility:"hidden"});
}

// ----------------------------------------- NAVIGATION ------------------------------------------------------- //

buyNowBtn.bind("click", function(){
//console.log("buyNowBtn clicked");
});

buyNowBtn.bind("mouseover", function(){
TweenMax.to(this, 0.5, {opacity:0.7});
});

buyNowBtn.bind("mouseout", function(){
TweenMax.to(this, 0.5, {opacity:1});
});

facebookBtn.bind("click", function(){
//console.log("facebook clicked");
});

facebookBtn.bind("mouseover", function(){
TweenMax.to(this, 0.5, {opacity:0.7});
});

facebookBtn.bind("mouseout", function(){
TweenMax.to(this, 0.5, {opacity:1});
});

twitterBtn.bind("click", function(){
console.log("twitter clicked");
});

twitterBtn.bind("mouseover", function(){
TweenMax.to(this, 0.5, {opacity:0.7});
});

twitterBtn.bind("mouseout", function(){
TweenMax.to(this, 0.5, {opacity:1});
});

function enableNav(){

// Deselect buttons
bHome.css("color", bNormal);
bAbout.css("color", bNormal);
bVideo.css("color", bNormal);
bGallery.css("color", bNormal);

// Home button
bHome.bind("click", function(){
navControl($(this));
})

bHome.bind("mouseover", function(){
onOver($(this));
})

bHome.bind("mouseout", function(){
onOut($(this));
})

// About button
bAbout.bind("click", function() {
navControl($(this));
});

bAbout.bind("mouseover", function() {
onOver($(this));
});

bAbout.bind("mouseout", function() {
onOut($(this));
});

// Video button
bVideo.bind("click", function() {
navControl($(this));
});

bVideo.bind("mouseover", function() {
onOver($(this));
});

bVideo.bind("mouseout", function() {
onOut($(this));
});

//Gallery
bGallery.bind("click", function() {
navControl($(this));
});

bGallery.bind("mouseover", function() {
onOver($(this));
});

bGallery.bind("mouseout", function() {
onOut($(this));
});

} // end enableNav()

function onOver(obj){
$(obj).css("color", bSelected);
}

function onOut(obj){
$(obj).css("color", bNormal);
}

function disableNavElement(btn){
btn.unbind("click");
btn.unbind("mouseover");
btn.unbind("mouseout");
btn.css("color", bSelected)
}

function navControl(obj){

// Kill all tweens
TweenMax.killAll(false);

resetCurrentSection();

var bName = $(obj).attr('id').substr(14); // $(obj)

// Enable button
enableNav();

if( bName == "homeBtn") {
nextSection = "home";
disableNavElement(bHome);
}

if( bName == "aboutBtn") {
nextSection = "about";
disableNavElement(bAbout);
}

if( bName == "videoBtn") {
nextSection = "videos";
disableNavElement(bVideo);
}

if( bName == "galleryBtn") {
nextSection = "gallery";
disableNavElement(bGallery);
}

// Display next section
showNextSection();

}

// ---------------------- HOME ------------------------------------------- //

function introHome(){
//console.log("introHome");
//sHome.show();
TweenMax.set([sHome], {visibility:"visible"});

// Animate in elements

if(firstPlay){
TweenMax.from(mainNav, 0.3, {opacity:0, immediateRender:false});
TweenMax.from(footer, 0.3, {opacity:0, immediateRender:false});
firstPlay = false;
}

TweenMax.to(homeImage, 0.5, {opacity:1, delay:0, immediateRender:false});
TweenMax.to(playerBg, 0.5, {y:playerBg["origY"], opacity:1, delay:0.3, immediateRender:false});

TweenMax.to(Logo, 0.5, {opacity:1, scale:1, delay:0.6, immediateRender:false, onComplete:function(){

//$("#Stage_sHome_player").show();

player.playVideo();

}});

TweenMax.to(flyingBoy, 1, {scale:1, immediateRender:false, x:flyingBoy["origX"], opacity:1, delay:0.9,
onComplete:function(){
animateFlyingBoy.play();
}
});

} // end introHome();


//------------------------ ABOUT ----------------------------------------//
function introAbout(){
//console.log("introAbout");
//sAbout.show();
TweenMax.set([sAbout], {visibility:"visible"});

TweenMax.to(aboutImage, 0.5, {opacity:1, x:aboutImage["origX"], delay:0, immediateRender:false});
TweenMax.to(aHeading, 0.5, {opacity:1, y: aHeading["origY"], delay:0.3, immediateRender:false});
TweenMax.to(text, 0.5, {opacity:1, y :text["origY"], delay:0.6, immediateRender:false});
TweenMax.to(logo2, 0.5, {opacity:1, scale:1, delay:0.9, immediateRender:false});
} // end introAbout()

//------------------------ VIDEO ----------------------------------------//
function introVideo() {
// console.log("introVideo");
// sVideo.show();
TweenMax.set([sVideo], {visibility:"visible"});

TweenMax.to(videoImg, 0.5, {opacity:1});
TweenMax.to(videoHeading, 0.5, {y:videoHeading["origY"], opacity:1, delay:0.3});
TweenMax.to(containerHolder, 0.5, {opacity:1, y:containerHolder["origY"], delay:0.6});
TweenMax.to(videoLogo, 0.5, {opacity:1, scale:1, delay:0.9});
TweenMax.to(videoBtnLeft, 0.5, {opacity:1, x:videoBtnLeft["origX"], delay:1.2});
TweenMax.to(videoBtnRight, 0.5, {opacity:1, x:videoBtnRight["origX"], delay:1.2});

} // end introVideo()

//------------------------ GALLERY --------------------------------------//
function introGallery(){
//console.log("introGallery()");
// Show gallery section
// sGallery.show();
TweenMax.set([sGallery], {visibility:"visible"});

TweenMax.to(containerGallery, 0.5, {opacity:1, x:containerGallery["origX"]});
TweenMax.to(arrowRGallery, 0.5, {x:arrowRGallery["origX"], opacity:1, delay:0.3});
TweenMax.to(arrowLGallery, 0.5, {x:arrowLGallery["origX"], opacity:1, delay:0.3});
}

nextImage_btn.click(function(){

imageCount++;

sym.getSymbol("sGallery").$("photo").attr("src", "images/img"+ imageCount + ".jpg");

if(imageCount >= 5) {
nextImage_btn.hide();
}
else
{
nextImage_btn.show();
prevImage_btn.show();
}

});

prevImage_btn.click(function(){

imageCount--;

sym.getSymbol(sGallery).$("photo").attr("src", "images/img"+ imageCount + ".jpg");

if(imageCount <= 1){
prevImage_btn.hide();
}
else
{
prevImage_btn.show();
nextImage_btn.show();
}
});

// ------------------------- VIDEO SECTION -------------------------------- //
var aVidThumbs = ["images/thumb01.jpg", "images/thumb02.jpg", "images/thumb03.jpg", "images/thumb04.jpg", "images/thumb05.jpg", "images/thumb06.jpg", "images/thumb05.jpg", "images/thumb06.jpg"];
var aYouTubeStr = ["-DaPBBOHfsA", "DlM2CWNTQ84", "DMEa0CJbAUs", "-DaPBBOHfsA", "DlM2CWNTQ84", "DMEa0CJbAUs", "-DaPBBOHfsA", "DlM2CWNTQ84"];

var totalImages = aVidThumbs.length;
var slideTo = 0;
var imageWidth = 253;

// vidPlayer init
$("#Stage_sVideo_fullscreenplayer").hide();
closeVideoBtn.hide();

closeVideoBtn.bind("click", function(){
footer.show();
fullscreenplayer.stopVideo();
TweenMax.to($("#Stage_sVideo_fullscreenplayer"), 0.5, {opacity:0, onComplete:function(){
$("#Stage_sVideo_fullscreenplayer").hide();
}});
// Hide close button
$(this).hide();
})

TweenMax.set($("#Stage_sVideo_fullscreenplayer"), {opacity:0});

imageSymbolArray = [];
photoBorderArray = [];
vHolderBgArray = [];

function traceSelected (symbolInTheArray){
$("#Stage_sVideo_fullscreenplayer").show();
closeVideoBtn.show();
footer.hide();
TweenMax.to($("#Stage_sVideo_fullscreenplayer"), 0.5, {opacity:1});
fullscreenplayer.loadVideoById({'videoId' : aYouTubeStr[symbolInTheArray.getVariable("index")]});
} // end traceSelected();

for(i=0; i<aVidThumbs.length; i++){
t = sym.createChildSymbol("videoHolder", container);
t.$("photo").css({"background-image" : "url('" + aVidThumbs + "')"});
t.$("photoBorder").css({"opacity" : "0"});
photoBorderArray.push(t.$("photoBorder"));
t.getSymbolElement().css({"position" : "absolute",
"left":i*270+"px"}); // 253px + 17px for margin
t.getSymbolElement().css({"cursor" : "pointer"});
t.setVariable("index",i);
imageSymbolArray.push(t);
}

// For thumb click and large video
$.each(imageSymbolArray, function( count, symbolInTheArray ){
//create jQuery reference to the item - not really needed here but shows how to do it.
var menuItem = $(symbolInTheArray);
//create a jQuery reference to the DIV element inside the symbol.
var menuElement = $(symbolInTheArray.getSymbolElement());
//now you can bind interactivity to the menu items' DIVs
menuElement.bind ("click", function(){
traceSelected(symbolInTheArray);
});
}
)

$.each(photoBorderArray, function( count, photoBorderInTheArray ){
//create jQuery reference to the item - not really needed here but shows how to do it.
var borderPhotoItem = $( photoBorderInTheArray);
//create a jQuery reference to the DIV element inside the symbol.
//var menuElement = $(symbolInTheArray.getSymbolElement());
//now you can bind interactivity to the menu items' DIVs
borderPhotoItem.bind ("mouseover", function(){
TweenMax.to(this, 0.5, {opacity:1});
});

borderPhotoItem.bind ("mouseout", function(){
TweenMax.to(this, 0.5, {opacity:0});
});
}
)

// Hide left arrow
arrowL.hide();

arrowR.bind("click", function(){

arrowL.show();

if(slideTo<totalImages-3){
slideTo++;
slideContainer();
$(this).show();
}

if(slideTo == totalImages-3){
$(this).hide();
}

});

arrowL.bind("click", function(){

arrowR.show();

if(slideTo>0) {
slideTo--;
slideContainer();
}

if(slideTo == 0) {
arrowL.hide();
}

});

arrowR.bind("mouseover", function(){
TweenMax.to(this, 0.3, {opacity:0.7});
});

arrowR.bind("mouseout", function(){
TweenMax.to(this, 0.3, {opacity:1});
});

arrowL.bind("mouseover", function(){
TweenMax.to(this, 0.3, {opacity:0.7});
});

arrowL.bind("mouseout", function(){
TweenMax.to(this, 0.3, {opacity:1});
});

function slideContainer() {
TweenMax.to(container, .8, {left: -slideTo*(imageWidth+17)});
}

// ------------------------ GALLERY ------------------------------------- //

var galleryFirstPlay = true;

for(j=0; j<aImagesGallery.length; j++){
//console.log(j);
tGallery = sym.createChildSymbol("imgHolder", containerGallery);
tGallery.$("photo").css({"background-image" : "url('" + aImagesGallery[j] + "')"});
tGallery.getSymbolElement().css({"position" : "absolute",
"left":j*944+"px"});
}

// Hide left arrow
arrowLGallery.hide();

arrowRGallery.bind("click", function(){

if(slideToGallery<totalImagesGallery-1){
slideToGallery++;
slideContainerGallery();
$(this).show();
}

if(slideToGallery == totalImagesGallery-1){
$(this).hide();
}

arrowLGallery.show();

});

arrowRGallery.bind("mouseover", function(){
TweenMax.to(this, 0.3, {opacity:0.7});
});

arrowRGallery.bind("mouseout", function(){
TweenMax.to(this, 0.3, {opacity:1});
});



arrowLGallery.bind("click", function(){

arrowRGallery.show();

if(slideToGallery>0) {
slideToGallery--;
slideContainerGallery();
}

if(slideToGallery == 0) {
$(this).hide();
}

});

arrowLGallery.bind("mouseover", function(){
TweenMax.to(this, 0.3, {opacity:0.7});
});

arrowLGallery.bind("mouseout", function(){
TweenMax.to(this, 0.3, {opacity:1});
});



function slideContainerGallery() {
//console.log("slide " + slideToGallery)
TweenMax.to(containerGallery, .8, {left: -slideToGallery*imageWidthGallery});
}