Search code examples
javascripthtmlcssfunctionwebkit

Is it possible to implement a smooth transition from text painted in one color to an animated gradient?

On the page, there is white-colored text with a button positioned below it. Additionally, an animated gradient is applied to fill the text. When the button is clicked, the -webkit-text-fill-color property becomes transparent, resulting in an abrupt change of the text color to match the gradient.

Here's what it looks like: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ

Is it possible to achieve a smooth transition from white to the gradient? (the -webkit-text-fill-color property does not support transition directly)

Solution

  • The CSS color property is transitionable so use that instead.

    <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Smooth color change in js</title>
  <link rel="stylesheet" href="css/styles.css" />
  <style>
    @font-face {
      font-family: Alice;
      src: local(Alice), url(../fonts/Alice-Regular.ttf);
    }
    
    html {
      height: 100%;
    }
    
    body {
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #201e1e;
    }
    
    h1 {
      font-family: Alice;
      font-size: 7vw;
      background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      -webkit-background-clip: text;
      background-clip: text;
      color: white;
      transition: color 5s linear;
      background-size: 500% 500%;
      animation: textShine 5s ease-in-out infinite alternate;
    }
    
    button {
      font-family: Alice;
      font-size: 20px;
      padding: 10px 20px;
      background-color: #201e1e;
      color: white;
      border: 2px solid white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    button:hover {
      background: linear-gradient(45deg, #38292c, #362d31, #363c3d, #2f3026);
    }
    
    @keyframes textShine {
      0% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }
  </style>

</head>

<body>
  <h1 id="my-text" class="show">Hello word</h1>
  <button id="button" onclick="changeColor()">Переливайся</button>
  <script src="script.js"></script>
</body>
<script>
  let col;

  function changeColor() {
    const myText = document.getElementById("my-text");
    const computedStyle = window.getComputedStyle(myText);
    const textColor = computedStyle.getPropertyValue("color");

    if (textColor === "rgb(255, 255, 255)") {
      col = "transparent";
      document.getElementById("button").innerHTML = "Не переливайся";
    } else {
      col = "white";
      document.getElementById("button").innerHTML = "Переливайся";
    }

    myText.style.color = col;
  }
</script>

    The snippet uses 5s as the transition time just for the demo but of course set that to whatever you require.