Search the Community

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}); }