Jump to content


Problem with ColorProps and number format

Moderator Tag

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

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

Link to comment
Share on other sites

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};


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



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

Link to comment
Share on other sites

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() {

function out() {

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


  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

how about this :

var obj2={C:16777215};


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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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.