Pick value between 2 (css) values using GSAP?

[suicidal.banana 1 Likes (Newbie)]

Hey all,

 

Long time Greensock user (since as2, love you guys! edit: lol, according to my profile since 1901) but this time i need a little help.

Im basically looking for a internal Greensock function (or one that's external and does what i need) but i cant find it in code or docs.

 

Let me hash out a bit, im working on a little framework for a '1Pager' site (you know, those silly sites that let you just scroll for more stuff as the entire thing animates all over the place) and im in need of a function that can take two css styles, a start and end, and then pick a point between them.

 

For example, see the below pseudo code:

var start = 0;
var end = 100;
var position = 0.5;

var result = myMagicalFunction(start, end, position); // result = 50

So im looking for a function that i can feed 2 variables, and then i get a variable between those 2 variables, based on a 'position'.

Obviously for the above example this is dead simple to do, but what i need is something like this that works for css variables, so for example the below:

var start = "0%";
var end = "100%";
var position = 0.5;

var result = myMagicalFunction(start, end, position); // result = "50%"

And thats still a pretty basic example, it should also work with things like colors, css transforms, etc.

 

So what i was hoping to be able to do is use some internal TweenMax function to get said values, is such a function available?

If its not, does anybody have a function like this? that can handle a load of css values?

 

Kinda started writing a function for it myself, but its a pretty hefty task, and feeling like im doing needless work, since one way or another TweenMax already has this ability, im just stumped how to use it.

 

Any help very much appreciated!!

Edited September 29, 2015 by suicidal.banana

[Diaco 1,948 Likes (Superhero)]

Hi suicidal.banana 

 

if you really need it for css string values , like color,dropShadow...etc , try something like this ( you need last version 1.18.0 ) :

function Find(S,E,P){
  var X={start:S};
  TweenLite.to(X,1,{start:E,ease:Linear.easeNone}).progress(P).kill();
  return X.start ;
};

console.log( Find('0%','100%',0.5) );
console.log( Find('red','#fff',0.5) );
console.log( Find('0px 0px 10px red','5px 5px 2px #000',0.5) );

 otherwise you can use another really simpler function .

[OSUblake 9,990 Likes (Superhero)]

Nice Diaco! That's a good way of doing it if you have a lot of values.

 

The function you are looking for is typically called lerp, which stands for linear interpolation. It's pretty easy to do, and I include it in a list of helper functions for my projects. The amount you can lerp is usually clamped between 0 and 1.

function clamp(value, min, max) {
  return value < min ? min : (value > max ? max : value);
}

function lerp(start, end, amt) {
  amt = clamp(amt, 0, 1);
  return start + (end - start) * amt;
}

[suicidal.banana 1 Likes (Newbie)]

Edit: oh hey, great, thanks both! will look at your functions to downsize mine

Edit2: Posted a much nicer function (based on the example Diaco provided) in a post below this one! if your just here to copy-paste, get that one instead.

 

---

 

Ended up putting together the below, its not the best solution, but it will do for now.

That said, id still be very eager to get an answer to my initial post, get the hunch that the below is just a little too hacky and creating needless overhead.

 

You will need jQuery and TimelineLite to be able to use the below function:
Stuffed it with comments just so it should be clear to everybody whats going on.

var getInBetweenValueGSAP = (function(lowestValueObj, highestValueObj, position, easingFunc) {
	var returnObj = {}; // define an object to return
	if((position != 0) && (position != 1)) { // is position different from 0 or 1
		var tl = new TimelineLite({paused:true}); // make a new timeline
		var tempElem = $('<div>'); // make a temporary div
	
		lowestValueObj.ease = easingFunc; // add the ease's to lowest and highest value obj
		highestValueObj.ease = easingFunc;
		
		tl.to(tempElem, 0, lowestValueObj).to(tempElem, 1, highestValueObj); // set up timeline to tween between the lowest and highest
		tl.seek(position); // seek too the position wanted
		var tempReturnObj = tempElem[0].style; // store the temp div's style
		
		// add everything with a key that matches one in lowestValueObj from tempReturnObj too returnObj (so browser css doesnt freak out jQuery)
		$.each( lowestValueObj.css, function( key, value ) {
			returnObj[key] = tempReturnObj[key];
		});
		
		tempElem.remove(); // clean up the temp element
	} else {
		if(position == 0) { returnObj = lowestValueObj; } // just return lowest
		if(position == 1) { returnObj = highestValueObj; } // just return highest
	}
	return returnObj; // return!
});

// Example usage:
// You feed it two sets of css properties, a position (from 0 too 1) and finally an
// (GSAP) easing function, and it returns a new object of css properties, which you can
// shove straight back into GSAP or jQuery
var bla = getInBetweenValueGSAP({top:'0%', color:'#FF0000'},{top:'100%', color:'#000000'}, 0.5, Power0.easeNone);
// bla = {color: "rgb(128, 0, 0)", top: "50%"}

Again, would still love to get an answer, since i have the hunch there is a less cumbersome way to go about doing this.
That said, feel free to use this code in your own stuff, it does exactly what was described in the first post, just know that it does require lowest and highest value objects to contain the same key/value pairs, or it will go all wack, but it shouldn't be hard to add checks for that in-case you end up needing those for junior devs or something.

Also feel free to share better versions of the above function, it was made rather quickly, so theres still room for improvement.

Edited September 29, 2015 by suicidal.banana

[OSUblake 9,990 Likes (Superhero)]

What you created almost looks like a mixture of both our responses, using clamping and setting a tween to certain progress value.

[suicidal.banana 1 Likes (Newbie)]

Yup it is, just very elaborate and over engineered Wrote a new one based on what Diaco shared, shared below, only needs TweenMax now, as it should. (or TweenLite if you use that, then just replace TweenMax with TweenLite in the below)

var lerpGSAP = (function(lowestValueObj, highestValueObj, position, easingFunc) {
    var returnObj = lowestValueObj;
    highestValueObj.ease = easingFunc;
    TweenMax.to(returnObj,1,highestValueObj).progress(position).kill();
    delete returnObj._gsTweenID;
    return returnObj;
});

// Usage is still the same as the previously posted getInBetweenValueGSAP
var bla = lerpGSAP({top:'0%', color:'#FF0000'},{top:'100%', color:'#000000'}, 0.5, Power0.easeNone);
// bla = {color: "rgba(128, 0, 0, 1)", top: "50%"}

Thanks both, much appreciated!!

[erikb 28 Likes (Newbie)]

 

Hi suicidal.banana 

 

if you really need it for css string values , like color,dropShadow...etc , try something like this ( you need last version 1.18.0 ) :

function Find(S,E,P){
  var X={start:S};
  TweenLite.to(X,1,{start:E,ease:Linear.easeNone}).progress(P).kill();
  return X.start ;
};

console.log( Find('0%','100%',0.5) );
console.log( Find('red','#fff',0.5) );
console.log( Find('0px 0px 10px red','5px 5px 2px #000',0.5) );

 otherwise you can use another really simpler function .

 

 

It might be helpful to include this utility as a static helper function within the library itself.  I find myself back on this page time and again.