Is it possible to animate custom properties?

[niklasp]

I want to animate the textstroke of an element

-webkit-text-stroke: 
-text-stroke: 

or css variables on scroll. is that possible? how can i achieve it with some hack? e.g. get the progress of the parallax and then set it manually? any help appreciated

[jscottsmith]

Of course, not really a hack. Set a variable on progress like so:

function Example() {
  const parallax = useParallax({
    onProgressChange: (progress) => {
      if (parallax.ref.current) {
        // set progress to CSS variable
        parallax.ref.current.style.setProperty(
          "--progress",
          progress.toString()
        );
      }
    },
  });
  return (
    <h1
      ref={parallax.ref}
      className="thing"
      // use the progress to change the width of the border
      style={{ WebkitTextStrokeWidth: `calc(20px * var(--progress))` }}
    >
      HELLO
    </h1>
  );
}

Here's a CodeSandbox to see it:

https://codesandbox.io/p/sandbox/react-scroll-parallax-text-stroke-klwy4l

Hope that helps.