ChronixPsyc

Hi, Thanks for your replies I've uploaded the code to JS Fiddle for you guys: http://jsfiddle.net/6Bk76/ I tried using the functions that you posted above but obviously I'm a complete r*tard at JS ( ) so cannot actually figure out how to do it properly. In my code, I have set "minTime = 0.4" and "maxTime = 1" and have been able to reverse this on the speed variable (inside trigonometryCalc function). What I need to be able to do is set the powerMask so that when the height reaches 0%, that will then equal minTime and when the height reach 100%, that will then equal maxTime and then anything in between is a range of 0.6 (I hope this makes sense) Thanks once again! EDIT: I thought I should add also what _number, _,min & _max would equal in my code: _number = $(powerMask).height(); _min = minTime = 0.4; _max = maxTime = 1;

I've got a timeline running which adds a mask over a div to act as a power slider for a game I'm building rather than having a range slider. I was wondering if anyone would know how to set min and max values and be able to then set the min and max as a range to have as power? pretty much what I need is below: powerMask height @ 0% = 0.4 powerMask height @ 100% = 1 At the moment, when the mask reaches 0%, it treats that as 1 second, rather than 0.4 seconds so I need to be able to flip the value round somehow. I've posted my whole javascript code below. Please let me know if you need the HTML elements also. $(document).ready(function(e) { var powerTm = new TimelineMax({ repeat:-1, yoyo:true }), arrowTm = new TimelineMax({ repeat:-1, yoyo:true }), ballTm = new TimelineMax({ paused:true }), player = $('.player'), goalie = $('.goalie'), football = $('.football'), arrow = $('#arrowPosition'), powerMask = $('.powerMask'); powerBar(); TweenLite.set(arrow, {transformOrigin:"50px 100px"}); TweenLite.set(arrow, {css:{transform:'rotate(-50deg)'}}); function powerBar() { arrowTm.pause(); powerTm.fromTo(powerMask, 0.5, {height:"100%"}, {height:"0%", ease:Linear.easeNone}); $('#background').one("click", function() { powerTm.stop(); var result = Math.round((250 - $(powerMask).height()) / 250 * 100) + "%"; var result = parseFloat(result) / 100.0; console.log("Power: " + result); arrowRotation(result); }) } function arrowRotation(result) { arrowTm.restart(); arrowTm.to(arrow, 0.8, {css:{transform:'rotate(50deg)'}, ease:Linear.easeNone}); var powerResult = result; console.log(powerResult.getMax, powerResult.getMin) $('#background').one("click",function() { arrowTm.stop(); // Transformation Matrix from Inline Style var arrowMatrix = $(arrow).css("-webkit-transform") || $(arrow).css("-moz-transform") || $(arrow).css("-ms-transform") || $(arrow).css("-o-transform") || $(arrow).css("transform") || "Either no transform set, or browser doesn't do getComputedStyle"; // Seperating the matrix values var values = arrowMatrix.split('(')[1]; values = values.split(')')[0]; values = values.split(','); var rotationValue = values[1]; // Rotation Value var arrowDeg = Math.round(Math.asin(rotationValue) * (180/Math.PI)); console.log("Arrow: " + arrowDeg + "deg"); trigonometryCalc(powerResult, arrowDeg); }); } function trigonometryCalc(powerResult, arrowDeg) { // Adjecent Length btg = 324; // Hypotenuse Angle hypotAngle = 180 - arrowDeg - 90; // Hypot radians hypotAngle = hypotAngle * Math.PI/180; // Opposite Side Length oppositeLength = btg / Math.tan(hypotAngle); // Hypotenuse Length hypotLength = Math.sqrt(btg*btg + oppositeLength*oppositeLength); // All Lengths console.log("Adjecent Length " + btg + ", Opposite Length " + oppositeLength + ", Hypotenuse Length " + hypotLength); ballX = 342; ballY = 473; goalY = 154; ballFinishingPositionX = ballX + oppositeLength; ballFinishingPositionY = goalY; speed = powerResult; console.log("Speed: " + speed); ballMove(speed); } function ballMove(speed) { ballTm.fromTo(football, speed, {left:342, top:473}, {left:ballFinishingPositionX, top:ballFinishingPositionY, ease:Linear.easeNone}); // added play(0) ballTm.play(0); } }); $(document).keyup(function(e) { if(e.keyCode == 27) { location.reload(); } }); Thanks!

I've been at this for 6 hours now... God damn! You are my idol now sir! (As you can probably guess, I'm a JavaScript noob..) Thank you so much!

Just an update, I've removed the timeline and replaced it with just a simple jquery animate. I do have a feeling that I will have to replace this at some point with the TimelineMax as I will probably add in an option to curl the ball. The jQuery is below: $(football).animate({ left:ballFinishingPositionX, top:ballFinishingPositionY }, 500, "linear");

First is powerBar() which moves the mask up and down and then waits for a click on the background ID. The arrowRotation(result) function is then called to rotate the arrow around a specified origin. Once another click on the background ID has been recognised, the trigonometryCalc(powerResult, arrowDeg, delay) which calculates the trigonometry. Finally, once the trigonometry has been calculated, ballMove() is called and this is where the problem occurs because if you leave the arrow moving for a few second, the ball just ends up on the goal line, without any animation. I've included console.logs of all the trigonometry angles and lengths in case you need to see these. I hope this makes sense

Hi, I've changed the external source the URL above and updated the codepen below: http://codepen.io/anon/pen/nmocu Thanks!

Hi all, I'm trying to built a penalty shootout game in JavaScript & basic HTML elements. I've run into a problem with a timeline running before the function gets called. Would someone please take a look at my code and let me know where I am going wrong please? I'm also not sure if I am calculating the trigonometry correctly as well.. So any help with that would also help http://codepen.io/anon/pen/HwIAj Thanks a lot!

That's amazing! Thank you so much!

Hi guys, I've scowered the forums and cannot actually find an answer to this (most likely extremely simple) issue I have. I am trying to make this mask reverse and repeat itself on complete. I've tried everything and cannot for the life of me get it to work. Would anyone be kind enough to explain to me how to use reverse and restart or resume if thats what I need to use? My code is below: var tl = new TimelineLite(); tl.fromTo(powerMask, 1, {height:250}, {height:0}) $('#background').one("click", function() { tl.stop(); arrowRotation(); }) Many thanks!

Amazing! Thank you so much! I worked out that my Math.random() wasn't quite correct either as I had a max and min set but not a proper equation and also the randomNumber() function was now redundant. The updated code is below if anyone else has a similar issue. http://codepen.io/anon/pen/yKmfF Thanks a lot Carl!

Hi all, Does anyone know of anyway I can either refresh or delete and recreate a timeline at all? I've created a duck shooter game and it works quite well, but when you click on the duck, the speed goes extremely slow and the duck doesn't make it all the way to the right before refreshing. I've created a codepen link below: http://codepen.io/anon/pen/dIAyx It may be something to do with the Math.floor bit as I don't really understand it too well. Thanks in advance!

Hi Carl, Sorry I haven't updated this post over the weekend. It's been too nice to work on a computer I've created the code at the link below. I don't know if it has something to do with the fact that I am using tagline style twice (once in the first slide and again in the second)? http://codepen.io/anon/pen/hdonG Thanks!

Thanks a lot for this information! It's already started to come together When you say I can add things onto the timeline, it seems to animate it in reverse for the second slide. I've pasted my code below, but not sure why this isn't working. Any ideas? Thanks! HTML: <div id="main-container"> <!-- FIRST SLIDE - START --> <div id="firstSlide"> <div id="logo"></div> <div id="timelinelite"></div> <div id="tagline"> <span>Welcome</span> <span>to</span> <span>The</span> <span>Game</span> </div> </div> <!-- FIRST SLIDE - END --> <!-- SECOND SLIDE - START --> <div id="secondSlide"> <div id="logo"></div> <div id="timelinelite"></div> <div id="tagline"> <span>Second</span> <span>Slide</span></div> </div> <!-- SECOND SLIDE - END --> JavaScript: $(window).load(function() { var logo = $("#logo"), firstSlide = $("#firstSlide"), secondSlide = $("#secondSlide"), timelineLite = $("#timelinelite"), tagline = $("#tagline span"), restartBtn = $("#restart"), tl = new TimelineLite(); tl.from(firstSlide, 1, {alpha:0}) .from(logo, 0.5, {delay:0.2, alpha:0}) .from(timelinelite, 0.2, {width:"0px", alpha:0}, "-=0.02") .staggerFrom(tagline, 0.5, {rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2) tl.to(firstSlide, 1, {left:-500}, 5) tl.from(secondSlide, 1, {alpha:0}) .from(logo, 0.5, {delay:0.2, alpha:0}) .from(timelinelite, 0.2, {width:"0px", alpha:0}, "-=0.02") .staggerFrom(tagline, 0.5, {rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2) restartBtn.click(function() { tl.restart(); }); });

Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!