How to distort a path's content following the path's animation

[mbenmass]

Hi everyone !

Firstly, I would like to express my gratitude to the developers who dedicated their efforts to create this incredibly impressive library! I am continually astonished by its capabilities and eagerly anticipate witnessing the remarkable things people will achieve with it.

I have developed a Curtain component specifically tailored for my screen transitions. This dynamic curtain is constructed using a left and a right side, each represented by a rectangle. Notably, the left or right border of each side is a bezier curve that transforms to create the effect of the curtain opening or closing.

I am using the Turbulence component to create stripes on the curtain.
Now, I am seeking a way to achieve a folding effect specifically for these stripes, when the curtain is closing/opening.

Is there a method to accomplish this using Skia?

Below is my code :

import {
  Canvas,
  ColorMatrix,
  Path,
  Shadow,
  Skia,
  Turbulence,
  useClockValue,
  useComputedValue,
  useValue
} from "@shopify/react-native-skia";

import { useEffect } from "react";
import { Easing, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
import { StyleSheet } from "react-native";

const CURTAIN_ANIMATION_DURATION = 3000;

export default function Curtain() {
  const size = useValue({ width: 0, height: 0 });

  const startPointAnimatedValue = useSharedValue(1);
  const firstControlPointAnimatedValue = useSharedValue(1);
  const secondControlPointAnimatedValue = useSharedValue(1);
  const endPointAnimatedValue = useSharedValue(1);

  const startPointAnimationConfig = {
    duration: CURTAIN_ANIMATION_DURATION,
    easing: Easing.inOut(Easing.poly(2)),
    useNativeDriver: true
  };

  const firstControlPointAnimationConfig = {
    duration: CURTAIN_ANIMATION_DURATION,
    easing: Easing.inOut(Easing.quad),
    useNativeDriver: true
  };

  const secondControlPointAnimationConfig = {
    duration: CURTAIN_ANIMATION_DURATION,
    easing: Easing.inOut(Easing.circle),
    useNativeDriver: true
  };

  const endPointAnimationConfig = {
    duration: CURTAIN_ANIMATION_DURATION,
    easing: Easing.inOut(Easing.poly(4)),
    useNativeDriver: true
  };
 
  useEffect(() => {
    startPointAnimatedValue.value = withRepeat(
      withTiming(0, startPointAnimationConfig),
      -1,
      true
    );

    firstControlPointAnimatedValue.value = withRepeat(
      withTiming(0, firstControlPointAnimationConfig),
      -1,
      true
    );

    secondControlPointAnimatedValue.value = withRepeat(
      withTiming(0, secondControlPointAnimationConfig),
      -1,
      true
    );

    endPointAnimatedValue.value = withRepeat(
        withTiming(0, endPointAnimationConfig),
        -1,
        true
    );
  }, [size.current.width]);

  const clock = useClockValue();
  const pathLeft = useComputedValue(() => {
    const path = Skia.Path.Make();

    path.moveTo(0, 0);
    path.lineTo(startPointAnimatedValue.value * size.current.width / 2, 0);
    path.cubicTo(
      firstControlPointAnimatedValue.value * size.current.width / 2, size.current.height / 3,
      secondControlPointAnimatedValue.value * size.current.width / 2, 2 * size.current.height / 3,
      endPointAnimatedValue.value * size.current.width / 2, size.current.height
    );
    path.lineTo(0, size.current.height);
    path.close();

    return path;
  }, [clock]) 

  const pathRight = useComputedValue(() => {
    const path = Skia.Path.Make();

    path.moveTo(size.current.width, 0);
    path.lineTo((2 - startPointAnimatedValue.value) * size.current.width / 2, 0);
    path.cubicTo(
      (2 - firstControlPointAnimatedValue.value) * size.current.width / 2, size.current.height / 3,
      (2 - secondControlPointAnimatedValue.value) * size.current.width / 2, 2 * size.current.height / 3,
      (2 - endPointAnimatedValue.value) * size.current.width / 2, size.current.height
    );
    path.lineTo(size.current.width, size.current.height);
    path.close();

    return path;
  }, [clock])

  return (
    <Canvas onSize={size} style={[sizeStyles.canvas]}>
      <Path path={pathLeft} color="brown">
          <Shadow dx={12} dy={12} blur={25} color="black" />
          <ColorMatrix
            matrix={[
              0.8, 0.6, 0.5, 0.8, 0.1, 
              0.2, 0.2, 0.2, 0.2, 0.0, 
              0.2, 0.2, 0.2, 0.2, 0.0, 
              1.0, 1.0, 1.0, 1.0, 1.0,
            ]}
          />
          <Turbulence
            freqX={0.02}
            freqY={0.001}
            tileHeight={1000}
            tileWidth={120}
            octaves={2}
          />
      </Path>
      <Path  path={pathRight} color="brown">
          <Shadow dx={12} dy={12} blur={25} color="black" />
          <ColorMatrix
            matrix={[
              0.8, 0.6, 0.5, 0.8, 0.1, 
              0.2, 0.2, 0.2, 0.2, 0.0, 
              0.2, 0.2, 0.2, 0.2, 0.0, 
              1.0, 1.0, 1.0, 1.0, 1.0,
            ]}
          />
          <Turbulence
            freqX={0.02}
            freqY={0.001}
            tileHeight={1000}
            tileWidth={120}
            octaves={2}
          />
      </Path>
    </Canvas>
  );
}

const sizeStyles = StyleSheet.create({
  canvas: {
    position: "absolute",
    width: "100%",
    height: "100%",
  },
});

recording.mp4

Any guidance, suggestions, or expertise provided will be greatly appreciated. Thank you in advance for your valuable contributions!