React Spring: Animating text with a background-clip applied

Question

I have some text in a section that's styled using:

.text-wrapper {
  background: linear-gradient(//gradient details//);
  background-clip: text;
  color: transparent
}

The basic markdown is:

<section className="text-wrapper">
  <h1>
    <span>Lorem</span>
    <span>Ipsum</span>
  </h1>
  <h2>
    dolor sit amet
  </h2>
</section>

This seems to be impacting my ability to use React Spring on the h1 and h2. I'd like them to animate into place on page load, but it only works when I comment out the selector for .text-wrapper.

I've tried using useTrail and useSprings with a delay, and right now, I'm just using useSpring to test, and none of these are working with the gradient text.

I've tried changing between background-clip and -webkit-background-clip; I've tried using tailwind classes to get the same color effect on the text, but nothing is seemingly working.

Is there a way I can refactor my code in order to get the animation and the gradient color?