alexwidua/figma-easing-gradients

Easing with multiple stops

gsajith opened this issue ยท 4 comments

Have you considered adding support for multiple stops + respecting the starting positions of the stops? If I have a gradient with multiple color stops, right now the plugin only takes the first and last colors into account, and also places them at 0% and 100%, respectively.

Screen Shot 2021-06-09 at 2 57 35 PM

This results in angular gradients having this harsh transition point at 0%

Screen Shot 2021-06-09 at 2 58 11 PM

Hej @gsajith ,
great point, allowing multiple color stops is definitely something that should make its way to the plugin. I will see when I have time to tackle this โœŒ๏ธ

About the color stop placement: What would be the expected plugin behavior here? Would the plugin honor the user's 'original' color stop position and just interpolate the stops in between?
Or would there be a feature to space the color stops evenly (ex. instead of defaulting two color stops to 0% and 100%, the plugin would position them at 33% and 66%)?
Would love to hear your thoughts on that.

/Alex

Hi @alexwidua!

Awesome, look forward to multiple color stops! It may be fairly complex - I can't visualize in my mind how one easing curve can control multiple color stops but maybe you have something in mind!

Yes, re: color stop placement my expectation is that it would honor the user's original color stop position and interpolate between them - this should be fairly easy for just two stops.

I took the liberty of cloning and trying it out myself ๐Ÿ‘‡
Screen Shot 2021-06-09 at 3 41 45 PM

I'm not as familiar with Vue so still trying to figure out how to update the plugin preview to reflect the new color stops ๐Ÿ˜… But maybe I can send you a PR once I figure that out?

Yeah, I also believe that it will be a little bit more complex โ€“ but could be fun to poke around in it!

Awesome that you already managed to implement it, but I think there is one gotcha: you lose the easing 'outside' of the color stops and get the sharp line back which you try to ease out in the first place.

gotcha-1

One solution just from the top of my head could be to also interpolate 'outside' of the color stops, I'm not sure if there would be any implications with this ๐Ÿค”

gotcha-2

And yes, I'd be more than happy to take a PR for this. Already thank you for opening up this issue and pondering with it for a bit, it's always fun to think about that stuff :)

/A

Issue got partially fixed with #2
Leaving the issue open until respecting multiple color stops is being tackled/solved.

Thank you @gsajith for opening up the issue and putting out a PR! :)
A new version of the plugin is now live.