Gradient Border in Hype

CleanShot 2022-12-14 at 23.02.21

Use currentColor (so, using the text color) to animate on color in the gradient.

Based on a YouTube short from the Google Chrome team. Added the currentColor tweak. Border-Radius also gets picked up… and using it on groups disturbs the Tumult Hype transformation handle calculations, but works as well.

GradientBorder.hype.zip (37,7 KB)


For even more control… use Hype Style Caster!

CleanShot 2022-12-14 at 23.14.25

GradientBorderStyleCasterSingleRotation.hype.zip (43,2 KB)
GradientBorderStyleCasterDeclaration.hype.zip (39,4 KB)
GradientBorderStyleCasterSingle.hype.zip (38,8 KB)
GradientBorderStyleCaster.hype.zip (38,8 KB)

9 Likes

top effect, exceptional examples (<- as always :+1: )