Gradient text with animation

1

Hello,

I am able to have the Gradient color effect on Text using CSS, below is the code.

<span style="background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-position: initial initial; background-repeat: initial initial;">MUSIC 2016</span>

How can I have the animation with changing the colors?
Or may be different method to achieve in Hype.

Thanks in advance.

1 Like
2

Just work with the timeline where you need to change inner HTML of your text.

anim text.hype.zip (9.8 KB)

1 Like
3

Thanks Matus for your effort, but this is not what I am looking for. Your example is static, I can’t see any motion.

1 Like
4

@dhiren!

As far as my readings have led me on this topic animating CSS Gradients is not a “built-in” spec.

However, apparently there are work arounds… just do a search for “CSS Gradient Animation” You will get a lot of hits. Below are two examples:

and

1 Like
5

Thanks JimScott, I will explore as you suggested.

6

Animating between two gradients is cool. Using Hue keyframes works, as a poor man’s workaround.

I created one animation that had a png of a house that was shot around twilight with light glowing in the windows and with exterior lights behind the bushes. I needed to transition between day and night. I created a 1 pixel wide vertical gradient that went from midnight blue to sky blue and through the spectrum to a pink-to yellow sunset hue. I used it to fill an object that was 50% taller than the stage, then moved the object vertically to cycle the sky from afternoon to sunset to night., emphasizing the effect by changing the opacity of cloud layer and raising the opacity of a stars layer As for the house, I used CSS3 to change the hue, contrast, and brightness that darkened the house over time, raised the contrast to bring up the lights, and changed the hue to a cooler, nighttime value. The value of creating a multi-band gradient manually (painting on a wide canvas then trimming it to 1 pixel wide) was that I could have very precise control over the slope of the color curves.

1 Like
7

gradient text

1 Like
8

Up.

More and more people want to recreate Apple's web page text style with gradient in texts:

Instead of coding it, I think it's time for Hype to have this feature (Color text with gradient) in the Text panel of the Inspector. :wink:

1 Like
9

background-clip: text is still not official, but support is not that bad: https://caniuse.com/background-img-opts

at least: could be a cool feature :slight_smile:

1 Like