How to animated position of BackgroundFilter?

[psquizzle]

I am trying to animate clip, x value using reanimated 3. x doesn't accept offset (Reanimated shared value) and of course, offset.value doesn't update with the gesture. I also tried to animate translate values to no avail. How would I achieve this?

<BackdropFilter
opacity={0.1}
clip={{
x: offset,
y: waveform.height,
width: containerWidth,
height: waveform.height,
}}
filter={
<ColorMatrix
matrix={theme === "dark" ? PARTIAL_E_S_B_FILTER_DARK : PARTIAL_E_S_B_FILTER_LIGHT}
/>
}
/>

[swami-laxman]

A key of prop shouldn't be a shared value
you have to pass entire prop as shared value
and then update that prop to animate that property.

You can get better idea from the code below

  const width = useSharedValue(0);
  const clip = useDerivedValue<SkRect>(() => {
    return {
      x: 0,
      y: 0,
      width: width.value,
      height: 100,
    };
  }, [width]);

  useEffect(() => {
    width.value = 0;
    width.value = withTiming(100, {duration: 1000});
  }, []);

  return (
    <Canvas style={{flex: 1}}>
      <Rect clip={clip} rect={rect(0, 0, 100, 100)} color={'blue'} />
    </Canvas>
  );

[psquizzle]

Ah cheers, this works :)