From 564c8f2f8e52483ce61ffc74297be9405be99ddb Mon Sep 17 00:00:00 2001
From: Pablo Velez Vidal <pablovv2016@gmail.com>
Date: Fri, 4 Nov 2022 17:58:28 +0100
Subject: [PATCH] fix animations for texts and buttons in footer

---
 app/screens/onboarding/footer_buttons.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/screens/onboarding/footer_buttons.tsx b/app/screens/onboarding/footer_buttons.tsx
index 726df2637..05141003d 100644
--- a/app/screens/onboarding/footer_buttons.tsx
+++ b/app/screens/onboarding/footer_buttons.tsx
@@ -47,42 +47,47 @@ const FooterButtons = ({
     const styles = getStyleSheet(theme);
     const BUTTON_SIZE = 80;
 
-    // keep in mind penultimate and ultimate slides to run buttons animations
+    // keep in mind penultimate and ultimate slides to run buttons text/opacity/size animations
+    const penultimateSlide = lastSlideIndex - 1;
     const isPenultimateSlide = currentIndex === (lastSlideIndex - 1);
     const needToAnimate = isLastSlide || isPenultimateSlide;
-    const inputRange = [(currentIndex - 1) * width, currentIndex * width, (currentIndex + 1) * width];
 
+    const inputRange = [penultimateSlide * width, lastSlideIndex * width];
+
+    // the next button must resize in the last slide to be the 80% wide of the screen with animation
     const resizeStyle = useAnimatedStyle(() => {
         const interpolatedWidth = interpolate(
             scrollX.value,
             inputRange,
-            [BUTTON_SIZE, isLastSlide ? width * 0.8 : BUTTON_SIZE, width * 0.8],
+            [BUTTON_SIZE, width * 0.8],
             Extrapolate.CLAMP,
         );
 
-        return {width: needToAnimate ? interpolatedWidth : BUTTON_SIZE};
+        return {width: interpolatedWidth};
     });
 
+    // use for the opacity of the button text in the penultimate and last slide
     const opacityTextStyle = useAnimatedStyle(() => {
         const interpolatedScale = interpolate(
             scrollX.value,
             inputRange,
-            [isPenultimateSlide ? 1 : 0, 1, 0],
+            isLastSlide ? [0, 1] : [1, 0], // from last to penultimate it must fade out (from 1 to 0), once it starts getting the penultimate range it must fade in again (from 0 to 1)
             Extrapolate.CLAMP,
         );
 
         return {opacity: needToAnimate ? interpolatedScale : 1};
     });
 
+    // the sign in button should fade out until dissappear in the last slide
     const opacitySignInButton = useAnimatedStyle(() => {
         const interpolatedScale = interpolate(
             scrollX.value,
             inputRange,
-            [1, (isLastSlide ? 0 : 1), 0],
+            [1, 0],
             Extrapolate.CLAMP,
         );
 
-        return {opacity: needToAnimate ? interpolatedScale : 1};
+        return {opacity: interpolatedScale};
     });
 
     let mainButtonText = (