Multiple color tweens

[kujohn]

Are there anyway to change multiple fill color in one tween such as:

fill: { 'red': 'pink', 'green': 'black', 'yellow': 'orange' }

It does not seem to work. I have to resort to mutiple .then callbacks to accomplish this. Am I doing something wrong?

[legomushroom]

Hey John!

Unfortunately, it is not possible and you need to rely on the then chains. The problem is that javascript does not give any reliable way to get the order of object keys, thus no order of animation will be preserved.

[kujohn]

I see. I have not looked at the source but I am guessing an array doesn't work as a structure?
If there are no major reason why, I could give it a shot and implement it using arrays.

[legomushroom]

@kujohn sure, could you tell me how do you see the API with arrays?

[kujohn]

Something like:

fill: [ '#eee', 'red', 'orange', 'black' ]

[legomushroom]

@kujohn looks nice 👍, what about easing? or maybe delay/duration?

[kujohn]

Yeah, I think if we have an order data type for these, we can introduce order matching for easing/delay/duration with the fill array. Or we can have these metadata inside the object of the fill array. But I am not sure what the direction of mojs is heading. LMK.

[legomushroom]

My concern is that the ordered items will not be very readable. Maybe some kind of keyframes will do?

const html = new mojs.Html({
  fill: [
    { to: '#eee', easing: 'ease.out' },
    { to: 'red', easing: 'ease.in' },
    { to: 'orange', easing: 'sin.in' },
    { to: 'black', easing: 'quad.out' },
  ]
});