From c044b1564f2fb150900d776f89ba9864cf724480 Mon Sep 17 00:00:00 2001
From: Janae Edwards <edwards.janae@gmail.com>
Date: Wed, 1 Jul 2026 10:30:06 -0400
Subject: [PATCH 1/2] adds animation for follow artists images on bottomsheet

---
 .../ArtistSaveOnboardingBottomSheet.tsx       | 69 +++++++++++++------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx b/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
index b22a483fd94..13cca565ff3 100644
--- a/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
+++ b/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
@@ -8,6 +8,7 @@ import { AutomountedBottomSheetModal } from "app/Components/BottomSheet/Automoun
 import { PaginationBars } from "app/Scenes/InfiniteDiscovery/Components/PaginationBars"
 import { GlobalStore } from "app/store/GlobalStore"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+import { MotiView } from "moti"
 import { useState, useRef, useCallback, useEffect } from "react"
 import { Platform } from "react-native"
 import PagerView, { PagerViewOnPageScrollEvent } from "react-native-pager-view"
@@ -103,27 +104,53 @@ export const ArtistSaveOnboardingBottomSheet = () => {
           <Spacer y={1} />
 
           <Flex flexDirection="row" justifyContent="center" alignItems="center">
-            {DUMMY_FOLLOWED_ARTISTS.slice(0, 3).map((artist, index) => (
-              <Flex
-                key={artist.id}
-                style={{
-                  marginLeft: index > 0 ? -10 : 0,
-                  zIndex: index,
-                  shadowColor: "#000",
-                  shadowOffset: { width: 0, height: 3 },
-                  shadowOpacity: 0.35,
-                  shadowRadius: 6,
-                  elevation: 8,
-                }}
-              >
-                <Image
-                  src={artist.imageUrl}
-                  width={75}
-                  height={75}
-                  style={{ borderRadius: 37.5 }}
-                />
-              </Flex>
-            ))}
+            {DUMMY_FOLLOWED_ARTISTS.slice(0, 3).map((artist, index) => {
+              let startPosition = 0
+              let zIndexValue = 1
+
+              if (index === 0) {
+                startPosition = 40
+                zIndexValue = 0
+              } else if (index === 1) {
+                startPosition = 0
+                zIndexValue = 1
+              } else if (index === 2) {
+                startPosition = -40
+                zIndexValue = 2
+              }
+
+              return (
+                <MotiView
+                  key={artist.id}
+                  from={{ translateX: startPosition }}
+                  animate={{ translateX: 0 }}
+                  transition={{
+                    type: "timing",
+                    duration: 300,
+                    delay: 300,
+                  }}
+                >
+                  <Flex
+                    style={{
+                      marginLeft: index > 0 ? -10 : 0,
+                      zIndex: zIndexValue,
+                      shadowColor: "#000",
+                      shadowOffset: { width: 0, height: 3 },
+                      shadowOpacity: 0.35,
+                      shadowRadius: 6,
+                      elevation: 8,
+                    }}
+                  >
+                    <Image
+                      src={artist.imageUrl}
+                      width={75}
+                      height={75}
+                      style={{ borderRadius: 37.5 }}
+                    />
+                  </Flex>
+                </MotiView>
+              )
+            })}
           </Flex>
 
           <PagerView

From f57e275bb4294733db1c8fa5c62dc8cea46b57cb Mon Sep 17 00:00:00 2001
From: Janae Edwards <edwards.janae@gmail.com>
Date: Wed, 1 Jul 2026 13:58:30 -0400
Subject: [PATCH 2/2] delayed animation to after 1 mississippi

---
 .../HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx b/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
index 13cca565ff3..1f172eca47d 100644
--- a/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
+++ b/src/app/Scenes/HomeView/Components/ArtistSaveOnboardingBottomSheet.tsx
@@ -127,7 +127,7 @@ export const ArtistSaveOnboardingBottomSheet = () => {
                   transition={{
                     type: "timing",
                     duration: 300,
-                    delay: 300,
+                    delay: 1000,
                   }}
                 >
                   <Flex