Two components with same animation values animating at different speeds

Question

Using React Native I am trying to animate a header when the user scrolls up on a FlatList, however, my FlatList seems to be animating faster than my Header. Even though I am using the same values - any reason why?

Here is the code for the Header;

const animateTransform = {
    translateY: scrollOffset.interpolate({
      inputRange: [0, 57],
      outputRange: [0, -57],
      extrapolate: "clamp",
    }),
  };

const opacity = scrollOffset.interpolate({
  inputRange: [0, 57 / 1.25],
  outputRange: [1, 0],
  extrapolate: "clamp",
});

return (
  <Animated.View style={[safeAreaContainerStyle, { transform: [animateTransform] }]}>
    <Animated.View style={[containerStyle, { opacity }]}>
      <TouchableOpacity
        style={locationContainerStyle}
        onPress={pushCityScreen}>
        <Text style={exploringStyle}>Exploring</Text>
        <View style={cityContainerStyle}>
          <Text style={cityNameStyle}>{city[language].name}</Text>
          <Feather
            name="chevron-down"
            size={15}
            color={textColor}
          />
        </View>
      </TouchableOpacity>
    </Animated.View>
  </Animated.View>
)

Here is my code for the FlatList;

const marginTop = scrollOffsetY.interpolate({
    inputRange: [0, 57],
    outputRange: [0, -57],
    extrapolate: "clamp",
  });

  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }], {
    useNativeDriver: false,
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <HomeHeader scrollOffset={scrollOffsetY} />
      {loading ? (
        <HomeSkeleton />
      ) : (
        <>
          <Animated.FlatList
            onScroll={onScroll}
            ListHeaderComponent={listHeaderComponent}
            data={venues}
            keyExtractor={(item) => item.id}
            renderItem={renderItem}
            ListFooterComponent={listFooterComponent}
            initialNumToRender={5}
            maxToRenderPerBatch={20}
            scrollEventThrottle={16}
            onEndReachedThreshold={0.5}
            refreshing={refreshing}
            onRefresh={onRefresh}
            style={{ marginTop: marginTop }}
            contentContainerStyle={{ paddingTop: 10 }}
            scrollIndicatorInsets={{ top: 10 }}
          />
          <StatusBar style={colorScheme === "light" ? "dark" : "light"} />
        </>
      )}
    </SafeAreaView>
  );

UPDATE

This appears to be a miscalculation with my input and output ranges considering the SafeAreaView and it's insets.

I will play around with the input and output variables adding or subtracting the insets.top coming from;

const insets = useSafeAreaInsets()

Answer 1

Adjust below things to have same animation

inputRange

• In your FlatList, you are using inputRange: [0, 57], and in the Header, you are using inputRange: [0, 57 / 1.25]. Make them same.

scrollOffset

• It seems like you are passing scrollOffsetY to the FlatList and scrollOffset to the Header. Make sure they have the same Animated.Value instance.