HSL tween

[benoit]

Hi,

How can I deal with HSL tween, after RGBtoHSL I have a tween between RGB…
I make an array of my colors to fixe this, but may be there something better?

 

 

See the Pen LYByBKK by benoitwimart (@benoitwimart) on CodePen

[Rodrigo]

Hi Benoit,

 

GSAP's PixiPlugin can actually animate HSL without the need of a helper function:

gsap.to(graphics, {duration: 2, pixi: {tint: "hsl(0, 100%, 50%)"}});

And also you can tween the fill color like this:

const rect = new PIXI.Graphics();
rect.beginFill(0xff00ff);
rect.drawRect(0, 0, 200, 100);
rect.endFill();

const colors = [0xff0000, 0x0000ff];

gsap.timeline({
  defaults: {
    duration: 1,
    ease: "none",
  },
  repeat: -1,
  yoyo: true,
})
  .to(rect, {
  pixi: {
    fillColor: colors[0]
  }
})
  .to(rect, {
  pixi: {
    fillColor: colors[1]
  }
});

app.stage.addChild(rect);

Be sure to take a peak at the PixiPlugin docs:

https://greensock.com/docs/v3/Plugins/PixiPlugin

 

And the examples in PIXIJS for GSAP:

https://pixijs.io/examples/#/gsap3-interaction/gsap3-tint.js

 

Hopefully this helps.

 

Happy Tweening!