slider easing

squarenotsquare/src/components/Slider.js

@@ -6,12 +6,15 @@ function LeftToRight(props){
   const [xPosition, setXPosition] = useState(new Animated.Value(props.origin));
 
   useEffect(() => {
-    Animated.timing(xPosition, {
+    Animated.sequence([
-      toValue: 0,
+      Animated.delay(props.delay),
-      easing: Easing.back(),
+      Animated.timing(xPosition, {
-      duration: props.duration,
+        toValue: 0,
-      useNativeDriver: true
+        // easing: Easing.back(),
-    }).start();
+        duration: props.duration,
+        useNativeDriver: true
+      })
+    ]).start();
   }, []);
 
 

squarenotsquare/src/screens/Home.js

@@ -36,14 +36,14 @@ function Home(props){
         </Text>
       </View>
       <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>
-        <Slider origin={-500} duration={750}>
+        <Slider origin={400} duration={750} delay={0}>
           <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
             <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
               Start
             </Text>
           </TouchableOpacity>
         </Slider>
-        <Slider origin={500} duration={750}>
+        <Slider origin={400} duration={750} delay={100}>
           <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
             <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
               High Scores