Jump to content


Min and Max Values?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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');
	TweenLite.set(arrow, {transformOrigin:"50px 100px"});
	TweenLite.set(arrow, {css:{transform:'rotate(-50deg)'}});
	function powerBar() {
		powerTm.fromTo(powerMask, 0.5, {height:"100%"}, {height:"0%", ease:Linear.easeNone});
		$('#background').one("click", function() {
			var result = Math.round((250 - $(powerMask).height()) / 250 * 100) + "%";
			var result = parseFloat(result) / 100.0;
			console.log("Power: " + result);
	function arrowRotation(result) {
		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() {
			// 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);
	function ballMove(speed) {
		ballTm.fromTo(football, speed, {left:342, top:473}, {left:ballFinishingPositionX, top:ballFinishingPositionY, ease:Linear.easeNone});
        // added play(0)

$(document).keyup(function(e) {
	if(e.keyCode == 27) {


Link to comment
Share on other sites

Hello.. im kind of confused what your trying to achieve.


Is there a way to provide a

See the Pen by pen (@pen) on CodePen

or jsfiddle example to better see what your issue is in context with JS, CSS, and HTML ??


thx :)

Link to comment
Share on other sites

Hi, I didn't understood your question, but here are some snippets you might find usefull:



bound - number, min and max. If the number is less then min, it returns min. If the number is greater than max, it return max.

function bound(_number, _min, _max){
    return Math.max(Math.min(_number, _max), _min);

This function returns percentage of a number in a given range. For example rangeToPercent(40,20,60) will return 0.5 (50%). rangeToPercent(34,0,100) will return 0.34 (34%) 

function rangeToPercent(number, min, max){
    return ((number - min) / (max - min));

This function returns number that corresponds to the percentage in a given range. For example percentToRange(0.34,0,100) will return 34.

function percentToRange(percent, min, max) {
    return((max - min) * percent + min);
  • Like 3
Link to comment
Share on other sites




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;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.