Jump to content


how tween with hex colors ? [solved]

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

hey guys , how gsap work to tween with hex colors tint ?
i get weird result.

    cs.tint = 0xffffff; // default
        TweenLite.to(cs, 0.6, {
        tint: 0x228200, // green
        ease: Power4.easeOut,




Existe a native method to compute hex color transition and keep green transition?


Link to comment
Share on other sites

yes this look perfect for me thank a lot for your fast answer.

  • Like 1
Link to comment
Share on other sites

Hi @jonForum 


If you're using PixiJS, the PixiPlugin can handle all your coloring needs and more.


var tl = new TimelineMax({ repeat: -1, yoyo: true })
  .to(sprite, 1, { pixi: { tint: "#ff0" }})
  .to(sprite, 1, { pixi: { tint: 0x2196F3 }})
  .to(sprite, 1, { pixi: { tint: "hsl(180, 90%, 60%)" }})
  .to(sprite, 1, { pixi: { tint: "rgb(236, 64, 122)" }});



See the Pen GPrRoM by osublake (@osublake) on CodePen




  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

I get the same initial results as OP. Is there a trick to tweening hex colors in GSAP v3 with no ColorPropsPlugin and without Pixi?



Link to comment
Share on other sites

Yup. I'm experimenting with that right now and it seems to work well. However I'm tweening a lot of elements simultaneously and want to avoid expensive string operations. Therefore I was wondering if a number based tween was possible.

Link to comment
Share on other sites

GSAP parses it and keeps it as a number internally so you don't have to worry about any string operations being expensive.

  • Like 2
  • Thanks 1
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.