is it possible to animate a strikethrough with React Spring?

Question

I'm new to React Spring and I initially tried this

const strikeProps = useSpring({
    textDecoration: "line-through",
    from: { textDecoration: "none" },
});

But it's not working. I think there should be a way simulate the CSS solution for this.

Not specific to react-spring, but [here is a post that shows how to accomplish this with CSS](https://stackoverflow.com/questions/36267507/is-it-possible-to-animate-a-css-line-through-text-decoration#36267849). — Alexander Nied, Jul 22 '20 at 16:37
Yup. I've seen that answer before posting my question. Wanted to know if it's possible to recreate with react-spring. — Alec Gerona, Jul 22 '20 at 21:47

score 1 · Accepted Answer · answered Jul 23 '20 at 08:42

The problem here is, that the original CSS solution is uses pseudo element for emulating the strike trough. We can only add react-spring properties for normal html elements. So the most compact way is to create a separate strike through component for this problem. For example:

const StrikeTroughtText = ({ children, weight = 1 }) => {
  const props = useSpring({
    from: { width: "0%" },
    to: { width: "100%" }
  });

  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      {children}
      <animated.div
        style={{
          position: "absolute",
          top: "50%",
          left: 0,
          width: props.width,
          height: `${weight}px`,
          background: "black"
        }}
      />
    </div>
  );
};

We basically animate the width of the absolutely positioned div containing a black line over the text.

You can use it like a div component:

<StrikeTroughtText>text</StrikeTroughtText>

For bigger font size the default 1 px line weight is not enough, so I added a weight property also.

Here is my example: https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js

is it possible to animate a strikethrough with React Spring?

1 Answers1