Using translateY to non-absolute elements.

Idk is there anybody who having this issue like me but, what im trying to do is , i want to collapse my header up when i scroll down and show it again immediately if i scroll up. Basic animation you know it:

And im using a method like below for the animation:

 const H_MAX_HEIGHT = 130;
  const H_MIN_HEIGHT = 0;
  const scrollY = useRef(new Animated.Value(0)).current;
  const diffClampScrollY = Animated.diffClamp(scrollY, 0, H_MAX_HEIGHT);
  const headerScrollHeight = Animated.interpolate(diffClampScrollY, {
    inputRange: [H_MIN_HEIGHT, H_MAX_HEIGHT],
    outputRange: [H_MIN_HEIGHT, -H_MAX_HEIGHT],
    extrapolate: diffClampScrollY,
  });

H_MAX_HEIGHT 130 becouse my header is position absolute and it haas 130px of height. so i give this headerScrollHeight to my header as a translateY value, it goes up nothings wong. butt i want also the next element go up and clear the empty area… Actually the next element is scrollview’s itself, and its not position abosolute … and if i give this headerScrollHeight to it as well, as a translateY value, its going up but shaking too much… 😦 i dont know what to do… in the scrollview i have a masonrylist component, in which i can’t get the scroll position with Animated… i can only get regular scrollY axis. thats why i collapsed the masonrylist component with a scrollview to convert it to Animated.ScrollView.. to get Animated.event properly… …

///// entire component is looking like that ///

<Animated.View
        style={{
          left: 0,
          right: 0,
          top: 0,
          position: 'absolute',
          height: H_MAX_HEIGHT,
          width: width,
          paddingHorizontal: 20,
          transform: [{translateY: headerScrollHeight}],
          overflow: 'hidden',
          zIndex: 999,
          backgroundColor: '#fff',
        }}>
        <Animatable.View animation="bounceInDown" delay={1500}>
          <HeaderNavigation FilterItems={FilterItems} props={navigation} />
        </Animatable.View>
      </Animated.View>
      <Animated.ScrollView
        onScroll={Animated.event([
          {
            nativeEvent: {contentOffset: {y: scrollY}},
          },
        ])}
        scrollEventThrottle={1}
        bounces={false}
        style={[styles.Wrapper, {paddingTop: H_MAX_HEIGHT}]}>
        <MasonryList
          imageContainerStyle={styles.Image}
          columns={2}
          spacing={5}
          images={data}
          onPressImage={item => navigation.navigate('Detail', {item})}
        />
      </Animated.ScrollView>

[Mhde96]

i have the same problem if you solve it please tell me how

[matthieugayon]

Same here, did you manage to solve that issue ?