title: How to wait to animate a path Line after another path Line's animation?
body: <p>I am using react native with reanimated 2 lib.
  I'd like to implement a simple checkmark</p>
  <p>but I want it to animate as if it was being built.</p>
  <p>I have a link here <a href="https://streamable.com/7i6arj" rel="nofollow noreferrer">https://streamable.com/7i6arj</a>
  showing the animation.</p>
  <p>the way I implemented it using reanimated was like this:</p>
  <pre><code>import React, {useEffect} from 'react';
  import {Dimensions, StyleSheet, View} from 'react-native';
  import Animated, {
    Easing,
    useAnimatedProps,
    useSharedValue,
    withTiming,
  } from 'react-native-reanimated';
  import Svg, {Path} from 'react-native-svg';
  
  const {width} = Dimensions.get('screen');
  
  const MIDDLE_OF_SCREEN_X = width / 2 - 60 / 2;
  
  const App = () =&gt; {
    const number = useSharedValue(20);
    const LX = useSharedValue(0);
    const LY = useSharedValue(0);
  
    const APath = Animated.createAnimatedComponent(Path);
  
    const path = useAnimatedProps(() =&gt; ({
      d: `M 0 80 L ${20 - number.value} ${100 - number.value} L ${ 20 - number.value + LX.value} ${(100 - number.value) - LY.value}`,
    }));
  
    useEffect(() =&gt; {
      LX.value = 0;
      LY.value = 0;
      number.value = 20;
  
      number.value = withTiming(0, {
        duration: 300,
        easing: Easing.in(Easing.ease),
      });
  
      setTimeout(() =&gt; {
        LX.value = withTiming(40);
        LY.value = withTiming(40);
      }, 300);
  
    }, [LX, LY, number]);
  
    return (
      &lt;View
        style={styles.container}&gt;
        &lt;Svg height={200} width={width}&gt;
          &lt;APath
            strokeLinejoin=&quot;round&quot;
            strokeLinecap=&quot;round&quot;
            animatedProps={path}
            x={MIDDLE_OF_SCREEN_X}
            y={0}
            stroke=&quot;hotpink&quot;
            strokeWidth={10}
          /&gt;
        &lt;/Svg&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'black',
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  export default App;
  </code></pre>
  <p>my big problem is that I don't think this is the ideal way of doing so. I mean, using setTimeout for wait a animation end to start the other seems bad idea.</p>
  <p>Ive dug through the docs but haven't found anything that could help me.</p>
  <p>Is there anything that could help such a scheduled animations or is my animation mindset that's wrong?</p>
  <p>thanks in advance. (°◡°♡)</p>
  <p><a href="https://i.stack.imgur.com/5rSF0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5rSF0.png" alt="checkmark" /></a></p>