ChronixPsyc

November 15, 2013

Hi,

Thanks for your replies

I've uploaded the code to JS Fiddle for you guys:

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;

November 14, 2013

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!

November 13, 2013

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!

November 13, 2013

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

November 13, 2013

Thank you..

to be more specific what is the name of the function the is getting called after the fact?

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

November 13, 2013

Hello, I tried to go to your codepen...

but in your code pen you might have to use another reference to TweenMax since the console is throwing an error about Tweenmax being undefined in Firefox:
ReferenceError: TimelineMax is not defined
(138 out of range 41)
you can use this script in your JS external source:
http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js

Hi,

I've changed the external source the URL above and updated the codepen below:

See the Pen nmocu by anon (@anon) on CodePen

Thanks!

November 13, 2013

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

See the Pen HwIAj by anon (@anon) on CodePen

Thanks a lot!

November 12, 2013

I'm assuming you want the timeline to automatically reverse right (not tl.reverse())? TimelineLite doesn't have repeat functionality, but TimelineMax does. Try:
var tl = new TimelineMax({ repeat:-1, yoyo:true });
// repeat:-1 means repeat forever
// yoyo:true makes it play then reverse then play etc

That's amazing! Thank you so much!

November 12, 2013

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!

July 15, 2013

The problem comes from the fact that you aren't resetting the duck's right position prior to making new tweens.

Basically you were creating new from() tweens but the duck was only tweening TO the position it was last in when you clicked it.

Try this:

function duckFly() {

randomNumber();

var duckSpeed = Math.floor(Math.random() * 5) + 1,

duckTop = Math.floor(Math.random() * 300) + 2;

TweenLite.set(duck, {top: duckTop, right:-117})

tl.from(duck, duckSpeed, {right:900, top:duckTop, ease:Linear.easeOut, onComplete:duckFly});

}

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.

See the Pen yKmfF by anon (@anon) on CodePen

Thanks a lot Carl!

July 15, 2013

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:

See the Pen dIAyx by anon (@anon) on CodePen

It may be something to do with the Math.floor bit as I don't really understand it too well.

Thanks in advance!

July 15, 2013

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)?

See the Pen hdonG by anon (@anon) on CodePen

Thanks!

July 12, 2013

Hi and welcome to the GreenSock forums.

Thanks for sharing your enthusiasm about the platform.

There are probably half a dozen ways to do this.

I would strongly recommend watching this video so that you understand all the control you have with the timing of when tweens start inside of TimelineLite or TimelineMax timelines:

http://www.greensock.com/sequence-video/

If you are building a basic linear sequence of slides animating in, pausing, animating out, animataing in etc. You might want to start with just creating 1 timeline that handles all the animation.
var tl = new TimelineLite();

tl.from(slide1, 1, {left:400})
//add more tweens that animated slide1 content in
...
//add slide1 animate out transition 5 seconds after animate in sequence finishes

tl.to(slide1, 1, {left:-400}, 5)

//animate in slide2 immediately after slide 1 animates out
tl.from(slide2, 1, {top:-400})
The platform is flexible to handle nesting timelines in timelines, so you could create all your animations for each slide in their own timeline and then add() them to a master timeline.

This codepen here:
See the Pen plsng by GreenSock (@GreenSock) on CodePen
illustrates a powerful concept of creating functions that generate and return timelines. You can use these functions to insert child timelines into a parent timeline at virtually any time.

Frankly some of this may be a bit much to handle after only a day with the platform. I would really suggest watching that video and viewing the codepen example it links to. Study the timeline docs and the important methods like to(), from(), add(), and staggerFrom() http://api.greensock.com/js/com/greensock/TimelineLite.html

---

Let us know if you have any more questions along the way.

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

July 12, 2013

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!

Notifications

Messages

ChronixPsyc

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by ChronixPsyc

Min and Max Values?

Min and Max Values?

TimelineMax Auto runs

TimelineMax Auto runs

TimelineMax Auto runs

TimelineMax Auto runs

TimelineMax Auto runs

How to reverse a timeline

How to reverse a timeline

Refresh or delete and create new?

Refresh or delete and create new?

Using TimeLineLite for slide transitions

Using TimeLineLite for slide transitions

Using TimeLineLite for slide transitions