cssreactjstypescriptstyled-componentscss-houdini

Houdini gradient transition on hover with styled-component

See this code example: Houdini-gradient-borders

When I want to recreate this effect in React TS with styled components I get it compiled with no errors. But the gradient on hover effect does not work. I am struggling to find the solution to get it work?

My App.tsx

import React from "react";
import styled from "styled-components";

/* Set Custom Properties Here */
const Houdini = styled.div`
  --color1: pink;
  --color2: orange;

  @supports (background: paint(houdini)) {
    @property --gradPoint {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 40%;
    }
  }

  --gradPoint: 40%;
  font-family: "Amiri";
  width: 380px;
  padding: 2rem;
  text-align: center;
  display: flex;
  background: pink; /* fallback value */
  background: linear-gradient(
    var(--color1) var(--gradPoint),
    var(--color2) calc(var(--gradPoint) + 20%)
  );
  transition: --gradPoint 0.5s, filter 0.8s;

  @supports not (background: paint(houdini)) {
    .post:hover,
    .post:focus {
      filter: hue-rotate(-90deg);
    }
  }
`;

function App() {
  return (
    <>
      <Houdini>
        <h2>This Demo Requires Chrome 85+</h2>
        <p>
          Browsers which support CSS Houdini will see a gradient with a gradient
          stop transition on hover. Unsupported browsers will see a gradient
          background with a hue rotation on hover.
        </p>
      </Houdini>
    </>
  );
}

export default App;
Solution

  • This entire animation relies on changing the CSS Variable --gradPoint which you are never doing.

    Move that --gradPoint variable around on hover.

    &:hover,
&:focus {
  --gradPoint: 100%;
}

    But the gradient on hover effect does not work.

    See example of adding said lines to your code: https://codesandbox.io/s/spring-fog-hvdr4w

    Hovering moves the gradient down just like the reference.

    image example