Poor performance with ScrollView's scrollY interpolation

Description

I’m interpolating on the ScrollView’s scrollY SharedValue to move my absolute positioned header around, and it has a noticeable delay (lag) when the user scrolls.

Screenshots

Here is a video demo (can’t upload here because file too large)

Steps To Reproduce

1. Create useAnimatedScrollHandler
2. Bind scrollY to event.contentOffset.y
3. Interpolate absolute positioned header’s (above ScrollView) translateY to the negative scrollY value
4. Notice that the header doesn’t move synchronized with the ScrollView, but rather lags behind

Expected behavior

I expect the header to move synchronously with the scroll view so it looks like one piece

Actual behavior

The header lags behind and looks like it has weight

Snack or minimal code example

const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler({
	onScroll: (event) => {
		scrollY.value = event.contentOffset.y;
	},
});
// ...
const headerY = useDerivedValue(() => {
	return interpolate(scrollY.value, [0, HEADER_IMAGE_HEIGHT + 30], [0, -(HEADER_IMAGE_HEIGHT + 30)], Extrapolate.CLAMP);
});
const headerStyle = useAnimatedStyle(() => ({ transform: [{ translateY: headerY.value }] }));
// ...


return (
	<Reanimated.ScrollView
		scrollEventThrottle={1}
		onScroll={onScroll}
		...>
		{/* ... */}
	</Reanimated.ScrollView>

	<Reanimated.View style={[styles.imagesContainer, headerStyle]}>
		{/* children like image goes here */}
	</Reanimated.View>
	);
// ...
const styles = StyleSheet.create({
	imagesContainer: {
		position: 'absolute',
		top: 0,
		left: 0,
		height: HEADER_IMAGE_HEIGHT,
		width: SCREEN_WIDTH,
	}
});

Package versions

• React: 16.13.2
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

[craftzdog]

scrollEventThrottle={16} solved in my case

[SudoPlz]

I still experience that issue in 2.2.2 (on iOS using Reanimated.createAnimatedComponent(MyScrollView). Shouldn’t that be fixed for versions above 2.0.0.alpha?