Jump to content
Search Community

Possible to get the actual hex value rendered onUpdate()?

studiobrain test
Moderator Tag

Go to solution Solved by OSUblake,

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

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!

Link to comment
Share on other sites

  • Solution

Well there's a lot of issues with what you're trying to do. First, you're tweening an object, not an element, so those hex values won't work because they are strings. You can make it a number by prefix it with a "0x", and removing the quotes and pound symbol, like this

var prop = {bgColor: 0x00ffff }

The next problem is that the values it tweens to won't be correct because they haven't been converted to RGB. But don't worry, the ColorPropsPlugin can fix all this. I also included some helper functions to convert between different color types.

 

See the Pen 3b52f1f708c5eb4183a8bb8314266461 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

I guess there was a lot of post posting going on because I didn't see Diaco's post.  :lol:

 

And I totally understand the confusion about tweening colors because I ran into the same issue not too long ago. It took me awhile to figure out that it needs to converted to RGB  :oops:

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.
×
×
  • Create New...