Search the Community

Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks

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

I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>

I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!

I'm trying to get the target to tween/animate to a position relative to the viewport or body (or parent element), rather than relative to the element itself. How can I do this? When I run the following code, it Tweens the element (target) to a position relative to its own starting position. TweenLite.to(target, 0.5, { top: '200px', left: '200px'})

Hey guys, So i have this element that I want to animate x=50, then when thats done animate x=100. I cant seem to make it work or figure out how people do it. It seems to work if I animate the target, then animate another target, then animate the original target again. In the codepen im animating the .menu-button

Hi All, I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example. My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading. I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. Help will be very much appreciated. Thanks for your time. Steven

Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else... In Phaser I animate the sprite as follows: var player = this.game.add.sprite(X, Y, 'player'); player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4 player.animations.play('walk'); And I am using GSAP to tweening objects... var tl = new TimelineLite(); tl.to(this.state1, 3, { x: -1000 }); I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this in the timeline animation with tl.reverse(); Thanks in advance PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/ Regards, Nicholls

Hi! I'm new to the GSAP But love what I have seen so far. I'm having a little problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin. Basically executing this: $(element).animate({transform: "rotateX(-180deg)"}); has the same effect as executing: $(element).animate({transform: "rotateX(180deg)"}); I do have perspective set up, in case you were wondering. Is there a special way I have to define negative values or is this a bug? Thank you guys! Kyryll

Hi, I am having trouble getting my animation to fire after I create new slides. I am trying to make a train board that updates from xml data every 20 seconds or so. 1. Create new slides 2. Animate new slides in from above the "slotXX" Futre steps: 3. Change div tag removing the "a" while changing z-index and removing hidden old slide 4. Repeat If anyone can set me on the right direction many thanks will ensue. I don't mind if you just point me to a tutorial that's almost identical or if you want to fork my codepen.

I see that GSAP hijacks JQuery's animate function, but this is causing issues with existing code that I have. For example: $(".object").live("click", function () { $(this).animate({ opacity: 0 }, function () { console.log($(this)); $(this).slideUp(); }); }); How it operated before GSAP: Click on the object, it animates it's opacity down to 0 and then slides up once the opacity animation is done. After GSAP: It animates its opacity down to 0, but then fails to run the slideUp. I used a console.log of what $(this) is in the callback - before GSAP, its a JQuery object, but afterwards its some new GSAP object that can't itself be animated. I then get an error: Uncaught TypeError: Cannot read property 'defaultView' of undefined I don't want to go through all of my code and change things to fit GSAP - how can I either fix this, or stop GSAP hijacking JQuery's animate plugin?

Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus

How to animate a sprite images in canvas using GSAP as in this tutorial is shown?

Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply

Hey All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn

Hello Everybody, I had a question on what everyone's preference is when animating... Do you prefer seconds or frames when animating? Also in what instances do you suggest animating in frames? I'm trying to get a better grasp of animating with GSAP using frames. In computer animation when animating, for example 24fps. So in GSAP when animating with frames using the useFrames special property. What determines the frames per second (FPS)? Does the browser determine the FPS? Thanks for any help with my questions to better understand using frames with GSAP!

This is my pen: http://codepen.io/vincentccw/pen/qrsAg right now all the divs move together and back to its original position, but how do I animate the div 1 after another? Do I have to target every single div 1 by 1 and animate it? Wouldn't the code be massive is so?

I have created a sample for it: http://codepen.io/vincentccw/pen/vLIGh If you look into my javascript panel I have 2set of codes, one using jquery and GSAP another is just jquery(comment out). The code will be active once use scroll down using mouse wheel. My question is how do I use scrollTop but completely in GSAP? As I think GSAP is more readable and animate faster and most importantly I can set up more complex animation at the same time.

How do I check if the current greensock animation is animating? Like in jQuery I can do it like this : $('.rightB').click(function(){ if (!$(this).is(":animated")) {//check for jquery animate only TweenLite.to(boxSlide, 1, {left:"-=100%"}); } }); The reason I want to do this is because my property is relative value and would cause complication if click continuously. I only want it to be able to click again only when the animation is done. Thanks for the help

Hi, Is it possible to animate an existing text weight from regular/normal font weight to bold style? Either in the Actionscript or Javascript version? I have a sentence where I need to "bolden" a keyword and it would be nice to animate it with an effect rather than just switch. Thanks, Attila

Hello, I was wondering if someone had any success of animating a set of images (known also as sprite sheets). I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick. I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel... looking forward for reading some ideas on the matter... EDIT: Something quick and dirty is the following: var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':posX}},0.1); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3); } we have a <div id="spriteContainer"></div> and some css: #spriteContainer{ background:url(fishSprite.png); background-repeat:no-repeat; position:absolute; left:50%; top:200px; width:38px; height:26px; overflow:hidden; } I used this sprite sheet:

Hi, I'm a newbie so maybe this is dumb question. I like to animate the color of links, something like: new TweenLite(myMenu, 1, {css:{a:linkColor:"#FFF"}}), But I can't find the property for a:link or a:visited. Is there cheatsheet for all CSS properties that GreenSock can animate. thanks, Ivo

Hi all, I'm exploring the possibilities of animating with GSAP in javascript after doing it for years in Flash. While discovering the nuances are fun, I'm finding the edges where Flash made it somewhat easier.... at least for now! I'm trying to recreate an animation I did in Flash but in Javascript. Essentially, it's a masked image that it "scratched" off to reveal an image underneath. Think of a lottery ticket with the silver scratch off stuff... I'd like to animate the reveal with a swiping motion. Any help/ideas on how I would best approach this? A quick google search for animating masks in Javascript turns up alot of SVG usage but I'd like to know how to do this with GSAP. thanks in advance for any thoughts!