Is there any way to transform strings with useTransform?

I didn’t find it anywhere in the docs, so I’m asking it here. How do you combine some CSS filter, for example, invert, with useViewportScroll and useTransform hook? I noticed that you can put only numbers in useTransform and not filter strings like invert(0). When I try to add filters I get:

Error: 'invert(0)' is not an animatable color. Use the equivalent color code instead.

This is code that replicates the error: https://codesandbox.io/s/dry-butterfly-m888o

Is there some alternative to this?

[vassiliskrikonis]

I didn’t find it anywhere in the docs, so I’m asking it here. How do you combine some CSS filter, for example, invert, with useViewportScroll and useTransform hook? I noticed that you can put only numbers in useTransform and not filter strings like invert(0). When I try to add filters I get:

Error: 'invert(0)' is not an animatable color. Use the equivalent color code instead.

This is code that replicates the error: https://codesandbox.io/s/dry-butterfly-m888o

Is there some alternative to this?

@crn1 I made your example work by using the first form of useTransform that takes just a Transformer<T> as a (second) argument

const invertFilter = useTransform(scrollYProgress, v => `invert(${v})`);

[Acccent]

Hi,

This was closed but the solution is more of a workaround… And the issue also exists with transform(), which doesn’t have the overload which takes a function as a second argument.

The problem seems to be in this file, color.test returns true even when the string doesn’t actually describe a color. I’m not sure how to fix it. Any ideas?