Colour change auto animation on text

Custom code
1

Hi there,

I’m looking to add some code to have some text auto animate through a specific set of colors.

I’m not good with code so hoping someone can help me with the exact code I need to input into the custom code widget.

Thanks!

2

Hi @Harry_Tuckwell welcome to the Readymag forum. I have attached some code and a guide below.

You’ll need to find the text element’s ‘data-id’ for this to work. I have attached a tutorial link here on how to find your ‘data-id’. You’ll notice in the code it targets the ‘h1’ tag. You can update this to paragraph ‘p’ or another tag such as ‘h2’ or ‘h3’.

If you have say 3 colours you wish to use rather than the 5 I have shown below. You’ll just need to make the percentages divisible into 100 :slight_smile: i.e. 0%, 50%, 100%…

<style>
  [data-id="PASTE DATA-ID HERE"]>h1 {
    animation-name: colorchanger;
    animation-duration: 10s; /* Change Duration */
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes colorchanger {
    0% {
      color: #ee6055;
    }

    25% {
      color: #60d394;
    }

    50% {
      color: #aaf683;
    }

    75% {
      color: #ffd97d;
    }

    100% {
      color: #ff9b85;
    }
  }
</style>
3

Hi, thanks so much for your response.

I’ve tried the code above and not had any luck just yet. Not sure which tag I should use, I’ve tried P, H1, H2, H3 and div with no success. Below is a screenshot of the code for the widget I am trying to animate, if that helps?

Thanks again

image
image1312×550 143 KB

4

Hi @Harry_Tuckwell I suggest giving your text style a tag, you can do this in the text editor.

264×643 19.1 KB

5

Unfortunately still not working. Should this code be going into the CSS field of the code widget?

6

If it’s going straight into the CSS field then you need to remove the <style> </style> tags.

7

Hey @HEADLESS.HORSE , still no luck unfortunately. Not sure what I’m missing. Here’s a screen shot of the code I’m using. The “Test” text widget has a h1 text style tag attached to it.

image
image1654×1416 207 KB