suicidal.banana

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!!

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.

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!!