Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonForum

how tween with hex colors ? [solved]

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

 

N6L92043_o.gif

 

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

thanks

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

 

*edited

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×