Problem with ColorProps and number format

[OSUblake 9,990 Likes (Superhero)]

I just came across a problem with v1.18 tweening colors using a number format, which is required for Pixi. Everything works as expected in 1.17. The tween uses a hex string like this.

TweenLite.to(image, 1, { colorProps: { tint: "#1ef04a", format: "number" }});

All these demos log out the tint before and after the tween.

 

1.17 working correctly

 

1.18 doesn't do anything using a hex string

See the Pen 2628e8f11a30e48bfe9fd7f3dad971b0?editors=001 by osublake (@osublake) on CodePen

 

1.18 using a number instead of hex string

See the Pen 98d797966109fd0715a0b87adabd5804?editors=001 by osublake (@osublake) on CodePen

See the Pen 0fd09101cb14ad8f484b27a368190c8b?editors=001 by osublake (@osublake) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi Buddy

 

seems works correctly as expected : 

See the Pen b8bc4658ea21038e6242894033226369 by MAW (@MAW) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Nice try, but that doesn't work. The colors have to be a number, you initially have it as a string. The object would need to look like this before you started the tween.

// This
var obj2={C:16777215};

// or this
var obj2={C:0xFFFFFF};

1.17

See the Pen 1cde87c613a06f72ff3edfb24fb52c81 by osublake (@osublake) on CodePen

 

1.18

See the Pen 1668959d4ada64edf1db516d13728e16 by osublake (@osublake) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Here is GSAP 1.18.0 Color Props and TweenMax working with HEX colors using a CSS radial gradient in both Firefox and Chrome

See the Pen BeJwd by jonathan (@jonathan) on CodePen

WebKit Chrome is not honoring the new CSS3 gradient syntax anymore. Last year they honored it, and as usual Chrome webkit doesn't allow the CSS3 Gradient standards syntax anymore. So keep in mind that in my example i have extra logic to check if Chrome webkit and Apple webkit to make sure the radial gradient gets applied cross browser.

//basic gradient demo using gradient + ColorPropsPlugin

// create a paused timeline
var tl = new TimelineMax({
  paused: true
})

// create an object to store initial color values
var colors = {
  top: "#0707F8",
  bottom: "#F6F609"
};

// use ColorPropsPlugin to tween the top and bottom colors
tl.to(colors, 1, {
  colorProps: {
    top: "#F3F30C",
    bottom: "#F80007"
  },
  onUpdate: colorize,
  onUpdateParams: ["#demo"]
});

// setup hover event
$(document).on("mouseenter", "#demo", over).on("mouseleave", "#demo", out);

function over() {
  tl.play();
};

function out() {
  tl.reverse();
}

function colorize(element) {
  
  // apply the colors to the element
  TweenLite.set(element, {
       background: "radial-gradient(circle," + colors.top + ", " + colors.bottom + ")"
  });
}

[GreenSock 8,117 Likes (Superhero)]

I'll look into this and get back to you, Blake. I do see the problem and I'll get it resolved. 

[Diaco 1,948 Likes (Superhero)]

how about this :

var obj2={C:16777215};
obj2.C='#'+obj2.C.toString(16);

TweenMax.to(obj2,3,{colorProps:{C:"#1ef04a",format:"number"},onUpdate:function(){
  console.log(obj2);
  TweenMax.set('.box',{backgroundColor:obj2.C})
}});

See the Pen b8bc4658ea21038e6242894033226369 by MAW (@MAW) on CodePen

[OSUblake 9,990 Likes (Superhero)]

That's still setting a string on the object, so it still won't work. But Jack said he see's the problem, so I wouldn't worry about it anymore. Thanks though!

[Jonathan 5,176 Likes (Superhero)]

Thanks .. i was trying it with a number and I saw what you where seeing. As always Jack is on top of things

[OSUblake 9,990 Likes (Superhero)]

I'm kind of surprised this hasn't happened to somebody else because I know a lot of WebGL libraries use numbers for colors, like pixi and three.js.

[GreenSock 8,117 Likes (Superhero)]

Better? (attached)

ColorPropsPlugin_1.4.1.zip

[OSUblake 9,990 Likes (Superhero)]

Looks like it. Thanks!

 

See the Pen bae3548a3fae7941155290c6ef10273a?editors=001 by osublake (@osublake) on CodePen