From 0106e685d0b7ae0935fe12582272ee21fec58160 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 2 Aug 2022 22:42:22 -0500
Subject: [PATCH] slider easing

---
 squarenotsquare/src/components/Slider.js | 15 +++++++++------
 squarenotsquare/src/screens/Home.js      |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/squarenotsquare/src/components/Slider.js b/squarenotsquare/src/components/Slider.js
index b0942b6..ff790ce 100644
--- a/squarenotsquare/src/components/Slider.js
+++ b/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, {
-      toValue: 0,
-      easing: Easing.back(),
-      duration: props.duration,
-      useNativeDriver: true
-    }).start();
+    Animated.sequence([
+      Animated.delay(props.delay),
+      Animated.timing(xPosition, {
+        toValue: 0,
+        // easing: Easing.back(),
+        duration: props.duration,
+        useNativeDriver: true
+      })
+    ]).start();
   }, []);
 
 
diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index 8333bb6..1a0c55a 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/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