ScrollView Animation and scrolling behavior

I share with you the SNACK of the CODE. Please open it because is very difficult to explain the problem, but once you have read the post and try it you have a very clear picture of the problem.

I have different cards displayed in column one after the others.

This means that if the height of the card is 250px the first card start at 0 and end at 250, the second one start at 250 and end at 500 and so on...

I'm refers to this positioning of cards as POSITION 1, you can see the POSITION 1 in this screen

The scroll event fire an animation that translates the cards in a manner that they are partially overlapped.

Specifically the first card start at 0, the second one at 50, the third on at 100 and so on.

This is the POSITION 2, you can see the POSITION 2 in this screen

This is pretty simple result to achieve. I'have used an Animated Scroll View that are placed on top of my list of cards because List is a component whose style is StyleSheet.absoluteFill

 //other code 
 <List array={cards}/>
      
 <Animated.ScrollView
    scrollEventThrottle={16}
    contentContainerStyle={styles.content}
    showsVerticalScrollIndicator={false}
    onScroll={Animated.event(
    [
     {
       nativeEvent: {contentOffset: { y }}
     }
    ],
    { useNativeDriver: true }
    )}
    >
  </Animated.ScrollView>
  //other code

List component aiming at display the cards and managing the translation from POSITION 1 to POSITION 2.

This is the general scenario. Now I'll introduce you to the PROBLEM.

User runs the application and the cards are showed in POSITION 1.

In this ways user can see only 2/3 cards.

When user scroll, animation fire, cards are translated in POSITION 2.

In this way user can see more cards, in the image are showed 11 cards.

If I have only 11 cards all is good. But If I have 12 cards or 100?

User are not able to see them because List is not scrollable.

I have tried to put List inside the Animated.Scrollview in this way

//other code    
 <Animated.ScrollView
    scrollEventThrottle={16}
    contentContainerStyle={styles.content}
    showsVerticalScrollIndicator={false}
    onScroll={Animated.event(
    [
     {
       nativeEvent: {contentOffset: { y }}
     }
    ],
    { useNativeDriver: true }
    )}
    >
   <List array={cards}/>
  </Animated.ScrollView>
  //other code

And I obtain this result

NOW THE PROBLEM:

I want that scroll of the List starts only when a certain amount of cards are in POSITION 2, in this case 11 cards. Why 11? because is the maximum number of the cards that user can see when the cards are in POSITION 2.

For a better understanding of the problem I suggest to you to play with SNACK and ANDROID EMULATOR.