studiobrain

Saw your reply post my post. (your codepen), that is what I needed! Just to shed a little light: The reason I am not just applying the color directly to an object is that this is a combination of reactJS and GSAP, and thus I am animating properties on the virtual DOM and not an actual DOM object. Upon receiving the new color onUpdate, I then call a native function (to react) setState and pass in the new color each tick. This re-renders the portion of the virtual DOM that has changed and viola! color change...

Thanks for the speedy reply! I have looked at that plugin, but maybe I am using it improperly: var param = {props: 150}; TweenMax.to(param, 0.5, { props: 450, roundProps: "props", colorProps: {backgroundColor: "#ff0000"}, ease: Back.easeInOut, repeat: 1, yoyo: true, onUpdate: this.updateCount, onUpdateParams: ["{self}"] }); updateCount(tween) { console.log(tween.target); //Object {props: 150, _gsTweenID: "t1", colorProps: NaN} } What I am expecting/hoping to see is a representation of the color at the point of the onUpdate call... (colorProps: "#fff000" or something that can be coverted) Is there something inherently wrong with this implementation?

disclaimer: Long time user of GreenSock (back to the days of gs in Flash), and this is a new account. Is it possible to get the actual hex value rendered on each tick of an animation to pass along as params via onUpdate? An example of grand prize winning answer: var prop = {bgColor: "#00ffff"} TweenMax.to(prop, 0.5, {bgColor: "#000", onUpdate: renderHex, onUpdateParams: ["{self}"]}) function renderHex(tween) { console.log(tween.target.bgColor); //show me "#0000ff", "#00000f", ect ect until the transformation is complete // currently returns NaN with expected response } As always, any direction is greatly appreciated and any conversion of expectations (convert hex to something that can be tracked) is welcomed!