Animating on Scroll Direction

[prayaslashkari]

I want to implement an animation, on the direction of scroll. I managed to store 'scrollDirection' in useSharedValue.

Now using that shareValue i want to trigger bunch of animation. The approach that I am using is, using that SharedValue I'm changing useAnimatedStyles. Is there any other way to trigger the animation apart from what I'm using for Cleaner Code as well as better readability.

const scrollDirection = useSharedValue('up');  //'up' | 'down'

const heightStyles = useAnimatedStyle(() => {
    if (scrollDirection.value === 'up') {
      return {
        height: withTiming(headerLayout.expandedState.height),
      };
    } else {
      return {
        height: withTiming(headerLayout.collapsedState.height),
      };
    }
  });
  
const fadeInStyle = useAnimatedStyle(() => {
    if (scrollDirection.value === 'up') {
      return {
        opacity: withTiming(0),
      };
    } else {
      return {
        opacity: withTiming(1),
      };
    }
  });

[prayaslashkari]

One of the approach that I used was,

const containerHeight = useSharedValue(102);
const collapsedOpacity = useSharedValue(0);

useDerivedValue(() => {
    if (scrollDirection.value === 'up' || scrollDirection.value === 'null') {
      containerHeight.value = withTiming(102);
      collapsedOpacity.value = withTiming(0);
    } else {
      containerHeight.value = withTiming(50);
      collapsedOpacity.value = withTiming(1);    }
  });

const rnHeightS=useAnimatedStyle(() => {
    return {
      height: containerHeight.value,
    };
  });


 const fadeInStyle = useAnimatedStyle(() => {
    return {
      opacity: collapsedOpacity.value,
    };
  });