Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'animate'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible.
  2. Hi - I am trying to troubleshoot some animation stuttering in an app we built. I decided to include GSAP jQuery plugin to see if it would make a difference, but I'm not sure it's even being utilized over jQuery's native animate. How do I know? I include the library: <script src="script/vendor/TweenMax/TweenMax.min.js"></script> <script src="script/vendor/jquery/jquery.gsap.min.js"></script> Then here's a typical animation call: $(obj).stop().animate({ rgb: 127 }, { duration: 2000, easing: (Constants.CUSTOM_EASE ? Constants.EASE : "easeOutQuart"), step: function() { var rgb = ~~ obj.rgb; self.drawArrow(rgb * 65536 + rgb * 256 + rgb); } }); As far as judging performance, is there a good, definitive way to see which is operating faster? I have Chrome Dev Tools FPS counter open, but both platforms seem to operate mostly at 60fps in the counter, with the occasional (severe) dropoff - which is what I'm trying to solve for.
  3. Hi there! I need help to animate my trees, so, this is my scene: http://imgur.com/a/zaiwS It's all separated in svg, what i need is simulate the tree balance with wind, anyone can help me? Thanks a lot!!
  4. Hi, Newbie here having trouble with animating on a path. I've managed to create a path using the bezier plugin included in tweenmax, but it is very inconsistent (path seems to be different each time). I'm looking to achieve the appearance of a piece of paper floating from one point to another - so a curved path, skewing, rotating etc. Any help would be greatly appreciated var tl = new TimelineLite({paused:true}) var trueTweenPoints = [ {top:'10%', left:'90%', rotation: 10}, {top:'75%', left:'75%', rotation: 80}, {top:'20%', left:'10%', rotation: 90} ]; tl.to(".trueTween", 0.8, {bezier:trueTweenPoints, type:"soft", curviness:1.25}); .trueTween { position: fixed; background: red; right: 4.5%; top: 30%; width: 160px; height: 300px; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; }
  5. Hi! I am new to GreenSock animation so do not know very much. Can anyone recommend to me some other animations that might look good for my animated graph? So far, I incorporated the autoAlpha, scaling, animate.css. I am trying to draw the top line from the circle but it keeps scaling from the top instead of the bottom. Even putting a transformOrgin of '0% 0%' will not help. Any tips would help. I learned GreenSock from the ihatetomatoes Greensock paid course. I keep referring to the videos as well. Thanks!
  6. Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
  7. Hello, I have a problem with Adobe Animate TimelineMax. The problem is that I need to navigate back and forward into the Animate timeline and play the same TimelineMax animations that afect to the same element in and out. in the first frame of animate keyframe I have one button and this: var root = this; root.stop(); root.chk1.visible = 0; root.continuar.visible = 0; function sigue0() { root.play(); } function entrar(vel) { root.boton1.disabled = true; tl0 = new TimelineMax({onComplete:sigue0}); tl0.from(root.boton1,vel,{x:root.boton1.x-150, alpha:0, ease:Back.easeOut},.0); } entrar(1); in the next frame I have this: var root = this; root.stop(); if (this.control == 1) { root.chk1.visible = 1; root.continuar.visible = 1; } function sigue1() { tl1.pause(0).clear(); root.play(); } this.boton1.addEventListener("click", fl_MouseClickHandler1.bind(this)); function fl_MouseClickHandler1() { this.control=1; root.chk1.visible = 0; tl1 = new TimelineMax({onComplete:sigue1}); tl1.to(root.boton1,1,{scaleY:2, scaleX:2,alpha:0},.0); } in the next yhis: var root = this; root.stop(); if (this.control == 1) { root.gotoAndPlay("op1"); } and in the label "op1" I have this: var root = this; root.stop(); this.volver.addEventListener("click", fl_MouseClickHandler1.bind(this)); function fl_MouseClickHandler1() { this.control=1; this.gotoAndPlay(0); } The problem is that the fisrt time I execute this the function "fl_MouseClickHandler1()" wait until every animation is finished and then execute "onComplete" and function "sigue1" but the second time the function "fl_MouseClickHandler1()" is executed it don't wait the animation of the elements and execute "onComplete". How can I fix that? I create elearning courses in Flash the last 10 years and now I want to do the same with animate but i need to navigate back and forward a lot of times in the Animate timeline. Sorry for my english and best regards, Eduardo
  8. Hello, I am so exited to use TweenMax but I am a flash novice. I want to start by tweaking a friends project and changing out some graphics, but Nothing I do will get these to work. I have attached a couple of samples, I would be eternally grateful if someone could tell how to make these simple examples work in my system so I can learn and train some students. I have the New Animate and Windows 10 64bit , if that matters in any way. I do not have the com folder in this obviously. Thanks, Steve SamplesFromCS6.zip
  9. Hi! We have been working on a new way to export faster, smaller HTML5 from Adobe Animate. As we are nearing launch we would love to hear about your experiences with Flash and Animate for HTML5. https://www.surveymonkey.com/r/Z3DNNQB Be sure to enter your email for a chance to download the product before launch!
  10. Hi there. I have just started using GSAP and want to animate the viewport attribute of the SVG inside a Object tag. This is the code I have but doesn't seem to work. var tl = new TimelineMax({delay:.5}), svgDoc = document.getElementById("SVGobject").contentDocument; TweenMax.set(svgDoc,{attr:{viewBox:"250 0 250 250"}}); tl.to(svgDoc, 1.5, {attr:{ viewBox:"0 0 1000 1000"}}); Once i have this working the ultimate aim is to trigger an animation of the viewport via an onClick event. Currently I just change the viewport via an array, so any help on this bit too would be very much appreciated. var interactions = { 'Button1' : '414 0 414 736', 'Button2' : '214 0 414 736', 'Button3' : '0 0 414 736', 'Button4' : '828 0 414 736', };
  11. Hi, new to these forums. I have a html5 banner I created in Animate for DCM with a click tag. Everything works fine, the link works if you click the banner, it validates in DCM html checker, but when i view the banner in a browser the cursor doesn't change to the hand/pointer cursor like it does on all links, banners. Any idea why this would happen? Any help would be much appreciated! Thanks!
  12. GSAP Masters, Have come across a situation that you are all more than likely preloaded to fire back a response to explain why. The codepen example above is handled allot different in chrome as it is to firefox or internet explorer (all that I have tested at this stage). I was looking for a way to only transform on one shape but then pattern that render across the whole page as opposed to transforming lots of shapes all together (was killing my cpu). Chrome let me believe I was close to an answer until yeah the other browser checks bummed me out. Looking forward to your response. Cheers, Bundy
  13. 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
  14. 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}); }
  15. 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>
  16. 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!
  17. 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'})
  18. 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
  19. 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
  20. 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
  21. Hi there, I just downloaded GSAP and I've been checking out codepen examples. I am a novice at JS so just a heads up I may need a small amount of hand-holding at first. Maybe someone can tell me if this is possible (also with GSAP will it work on IE9+?)- I am making a simple hidden object game where there is a list of items and the user clicks on the objects in the list. When the item is clicked, it fadesOut and strikes out the object text on the list. I've got this working with jQuery. HERE is where I am having trouble. I want users to be able to click on the object's name of text in the list and be given a hint. That hint would consist of magic sparkles moving a long a path and circling the object and then fading away. I'll need a different path for each list item. Also, once striked out cicking the object's name for help should be disabled. I am also trying some SVG plugins and haven't been successful for multiple paths on click yet. I am trying to figure out codepen for first time....so I'll try and have what I have so far available soon. Thanks to anyone willing to help a newb out! OK! Here is the codepen link: http://codepen.io/leelou/pen/IfixC
  22. 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
  23. 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.
  24. 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?
  25. 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
×