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})`),
          }}
        />