phillip_vale

Hi, I am trying to do a simple nav that starts as a 'burger', animates to a cross and opens the menu on the right. I would then i would like it to change back to a burger and hide menu if the cross is clicked or an item in the menu is clicked. Does this involve switching between the onClick="menuIn()" and onClick="menuOut()" like they mention in this forum? http://stackoverflow.com/questions/5303899/change-onclick-action-with-a-javascript-function Am i even close? Thanks for any help, Phil

That is great help thanks Carl. I will look into the onLoad or loadComplete callbacks. Codepen looks like it has exactly what i am trying to do as well. I never would have thought to look there. Cheers, Phil

This is great thanks so much. Last question, when i use it in the index.html file the <script> works perfectly. When i implement it in the .js file i have attached it stops working. Any ideas what the error could be here? Thanks again, Phil

Amazing, Carl to the rescue again! I guess i was wanting to have a mainTL with another timeline resting on pause that would play once the first 2 items in the mainTL have. I have updated my codepen to this... var mainTL = new TimelineMax() mainTL .to("#moving", 1, {x: 100}) .play("otherTL") var otherTL = new TimelineMax({paused: true}) otherTL .to("#move", 1, {x: 100}) I have heard about nested timelines in my reading. Does that sound like where i am going with this? Thanks for you help again, Phil

Hi, I am trying to work out best practice to pause another play another timeline. I have included 2 attempts with the first commented out. Ideally i would like it to run so that in the sequence of the first timeline (tl1) it resumes the paused timeline (tl2). I'm not sure if this means that an onComplete need to be added or whether it can just be a command in the timeline. e.g. .from("object", 1, {})... .from("object", 1, {})... .resume("tl2") .from("object", 1, {})... Sorry if the syntax is incorrect just trying to explain my problem. Any help is appreciated. Thank you, Phil

Hi Carl, Thanks so much for you help on this. The client has now changed the brief where the buttons need to hover and show their name. I tried updating the codepen but i think i am missing something. I thought the reverse would handle the MouseOff but they seem to stay on. Again thanks so much for your help so far. Cheers, Phil

Hi, I am trying to build a preloader based on a new logo for a client. I tried some tutorials and even reworking existing code but can't quite grasp it. I essentially would like this animation to repeat until the content behind it is loaded and then on completion the logo jumps and fades. Genuinely trying to learn so don't mind any pointers. I'm not sure what i am checking the loading elements against and what should occur when those elements have loaded. Thanks for any help, Phil

Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil

Hi Carl and Rodrigo, Thanks for your advice, help and examples for this. I will try these with my site and let you know how i go. Cheers, Phil

Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil

Hi, I am trying to create a mobile menu using Greensock. When the page loads the menu automatically opens. When I add .pause() to the timeline this it doesn't work at all. Am I even close? Thanks, Phil

Oh man, thank you very much Dipscom!

Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil

Thanks ZachSaucier! Life saver!

Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil

Hi Carl, Thanks for the help, I think i am way out of my depth so i am going to strip it back and try to understand how just a simple slider works and try to add a next / prev button to that. Cheers, Phil

Hi Diaco, Thanks so much for that! I have now done it with 2 seperate lightboxes and 2 seperate links. In your opinion is there a smarter way to do it? Thanks, Phil

Hi, Trying to build a Greensock lightbox. Am I doing this the right way? When I close it, it won't reopen. Also, am I building this correctly so that I could add another link / lightbox once this works? Thanks, Phil

Hi all, Trying to build a greensock slider with some code that i have put together from pens, tutorials etc. I thought i was going well but i have hit a snag. I wanted the first slide to have have another timeline inside of it where 3 elements animate independantly. these then all dissappear as the first slide does. The problem is when it repeats the first slide doesn't animate again. Is there a way to make it 'refresh'? Thanks for any help, this is probably a bit adventurous for me but really wanted to give it a go. After this i'm going to try and add the buttons. Phil

Amazing, thanks ihatetomatoes! I was after the second answer! I have now written a startFunction as well so I can get the car going again.

Hi there, I am trying to animate a car moving along a road and need the wheels rotation and the chassis bouncing to stop as the road runs out. It's not looking too bad except that i can't get the chassis and tyre vars to finish after the rest of the timeline finishes. The code below simply pauses everything from the start. Sorry if the answer is obvious... <script type="text/javascript"> var chassis = new TweenMax.to ("#chassis", .1, {top:1, yoyo:true, repeat:-1}) var tyre = new TweenMax.to ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.easeNone}) var tl = new TimelineMax(); tl .from("#suv", 8, {left:20, ease:Elastic.easeInOut}, "start") .from("#shop", 6, {left:1456}, "start") .to("#road", 6, {left:-1456}, "start") chassis.pause(); tyre.pause(); </script> Thanks in advance, Phil

Nice one, thank you!

Hi there, I am trying to copy exactly what the animator is achieving in this clip. http://greensock.com/sequence-video I need to create a HTML5 banner ad for a client. Unfortunately, I need a bit more control than just using Tweenlite delays and overlaying different animations. TimelineLite seems to offer the answer that I need and I thought that this tutorial was offering the solution. However, although my banner works as a simple animation as soon as I convert the code similar to that in the tutorial it ceases to work. My code looks like this... <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script> <script type="text/javascript"> var tl = new TimelineLite(); tl.from("#heading", 1, {left:-280, autoAlpha:0}) .from("#button", 1, {left:-280, autoAlpha:0}) .from("#tandc", 1, {autoAlpha:0}) </script> Do I need to include a <script src= for TimelineLite? Am i missing something really obvious? Thanks in advance, Phil

Feel like there must be a better way to write this... import com.greensock.TweenMax; import com.greensock.easing.*; import flash.filters.BlurFilter; var a = 0+Math.random()*50; var d = 0+Math.random()*1; flashingLights = function () { TheWidth = 300; // The Width of effect area -> in pixels Object(this).bg._width = this.TheWidth TheHeight = 250; // The height of effect area -> in pixels Object(this).bg._height = this.TheHeight maxLightsize = 60; // Scaling the cell NumOfCells = 30; // Quantity of Cells on the stage for (i=0; i < NumOfCells; i++) { TheCell = attachMovie("Light_Cell", "Light_Cell"+i, i); // Attaching the 'Light_Cell' from the library (Linkage) TheCell._alpha = 100; // Creating random alpha value RandomSet = 4*Math.random()*4; // Create a random set for amount of blur TheBlurEffect = new BlurFilter (RandomSet,RandomSet,3); // Create variable with the filter setting (xBlur, yBlur, quality) TheCell.filters = [TheBlurEffect] // Applies the filter to the object named myObject TheCell._x = -(TheWidth/2)+Math.random()*(1.5*TheWidth); // Positioning the cell on the X axis. TheCell._y = -(TheHeight/2)+Math.random()*(1.5*TheHeight); // Positioning the cell on the Y axis. TheCell._xscale = TheCell._yscale = 60 + Math.random()*(maxLightsize*10); // Determine the scale of the Cell //trace (TheCell); //trace (d); } TweenMax.to(_level0.Light_Cell1, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell2, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell3, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell4, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell5, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell6, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell7, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell8, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell9, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell10, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell11, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell12, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell13, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell14, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell15, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell16, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell17, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell18, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell19, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell20, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell21, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell22, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell23, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell24, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell25, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell26, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell27, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell28, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell29, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); TweenMax.to(_level0.Light_Cell30, 1, {_alpha:a, yoyo:true, repeat:-1, delay:d}); }; flashingLights(); This is due first thing tomorrow morning so any help would be greatly appreciated!

Feel like I might be getting closer. I have the entire 'TheCell' fading in and out. When I trace (TheCell); it shows... _level0.Light_Cell0 _level0.Light_Cell1 _level0.Light_Cell2 _level0.Light_Cell3 _level0.Light_Cell4 _level0.Light_Cell5 _level0.Light_Cell6 _level0.Light_Cell7 _level0.Light_Cell8 _level0.Light_Cell9 _level0.Light_Cell10 _level0.Light_Cell11 _level0.Light_Cell12 _level0.Light_Cell13 _level0.Light_Cell14 _level0.Light_Cell15 _level0.Light_Cell16 _level0.Light_Cell17 _level0.Light_Cell18 _level0.Light_Cell19 _level0.Light_Cell20 _level0.Light_Cell21 _level0.Light_Cell22 _level0.Light_Cell23 _level0.Light_Cell24 Is there a way to enter this in a TweenMax call? i.e. TweenMax.to(_level0.Light_Cell20, 1, {_alpha: a, repeat:-1, yoyo:true}); Thanks, Phil