Animation jittery even though fps stays at 60fps

Description

Scrollview scroll with modifying the height of the header is super jittery. The only device it works on properly is iPad Pro. All iPhones it does not work well. Test devices iPhone 11 Pro, iPhone 6 and iPad Pro. Also it appears to just be on momentum scroll. (The event throttle is 1).

Screenshots

Steps To Reproduce

See code below.

Expected behavior

Smooth height animation.

Actual behavior

Jittery animation.

Snack or minimal code example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { interpolate, useSharedValue, useAnimatedStyle, useAnimatedScrollHandler, Extrapolate } from 'react-native-reanimated';

function ScrollExample() {
  const y = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler((event) => {
    y.value = event.contentOffset.y;
  });

  const stylez = useAnimatedStyle(() => {
    const height = interpolate(y.value, [-100, 0, 200], [500, 400, 100], Extrapolate.CLAMP)
    return {
      height: height,
      // zIndex: height > 100 ? 0 : 1,
    };
  });

  console.log('render');

  return (
    <View style={{flex: 1, backgroundColor: '#f1f2f3'}}>
      <Animated.View style={[{backgroundColor: '#fab', ...StyleSheet.absoluteFill, bottom: null }, stylez]} />
      <Animated.ScrollView
        contentContainerStyle={{paddingTop: 300}}
        onScroll={scrollHandler}
        scrollEventThrottle={1}>
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
        <View style={{height: 200, margin: 20, marginBottom: 0, backgroundColor: '#fff', borderWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', borderRadius: 8}} />
      </Animated.ScrollView>
    </View>
  );
}

export default ScrollExample

Package versions

• React: ~16.13.0
• React Native: https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz (.63)
• React Native Reanimated: 2.0.0-alpha.6.1
• NodeJS: 12.19.0

[arthurgeron-work]

I’m on 2.5.0, and if a element inside my scroll is animating with interpolation while the user is scrolling the scroll jitters…

[jakub-gonet]

This should be resolved.