How to update filter functions values based on x value

[hadikman]

Hi
How can I use x value for filter contrast and brightness values?
I did this but it doesn't work.

 const {x} = useSpring({ from: { x: 0 }, to: { x: 100 } }) const contrastValue = x.to({ map: Math.abs, range: [50, 500], output: [100, 125], extrapolate: 'clamp', }) const brightnessValue = x.to({ map: Math.abs, range: [50, 500], output: [1, 0.45], extrapolate: 'clamp', }) <animated.div style={{ filter: contrastValue.to(c => `contrast(${c}%)`) + ' ' + brightnessValue.to(b => `brightness(${b})`), }} /> 

Thank you in advance

[hadikman]

Hi
I used the to function to merge contrastValue and brightnessValue:

 import { to } from '@react-spring/web' const contrastValue = x.to(...) const brightnessValue = x.to(...) <animated.div style={{ filter: to([ contrastValue , brightnessValue ], (c, b) => `contrast(${c}%) brightness(${b})`), }} />