title: interpolateNode vs interpolate : interpolate causes jank while animating height while interpolateNode doesn't
body: <p>I have just started using <code>react-native-reanimated</code>. And I would like to use <code>reanimated v2</code> apis (newer ones).</p>
  <p>Here, in this example, there is a considerable performance drop using <code>interpolateNode</code> and <code>interpolate</code></p>
  <p>Here's the example</p>
  <pre><code>import * as React from 'react';
  import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
  import Constants from 'expo-constants';
  import Animated, {
    useSharedValue,
    useAnimatedScrollHandler,
    Extrapolate,
    useAnimatedStyle,
    interpolate,
    interpolateNode,
  } from &quot;react-native-reanimated&quot;;
  
  export const HEADER_IMAGE_HEIGHT = Dimensions.get(&quot;window&quot;).width / 3
  
  const styles = StyleSheet.create({
    image: {
      position: &quot;absolute&quot;,
      top: 0,
      left: 0,
      width: '100%',
      resizeMode: &quot;cover&quot;,
    },
  });
  
  const IMAGE_URI = 'https://i.pinimg.com/originals/a4/1a/e5/a41ae5ff09234422737d3899cc895184.jpg'
  
  const touchX = 100;
  
  const heightInputRange = [-touchX, 0];
  const heightOutputRange = [HEADER_IMAGE_HEIGHT + touchX, HEADER_IMAGE_HEIGHT];
  const heightAnimConfig = {
    extrapolateRight: Extrapolate.CLAMP,
  }
  
  const topInputRange = [0, touchX];
  const topOutputRange = [0, -touchX];
  const topAnimConfig = {
    extrapolateLeft: Extrapolate.CLAMP,
  }
  
  export default function App() {
    // const scrollY = useSharedValue(0)
  
    // const scrollHandler = useAnimatedScrollHandler({
    //   onScroll: (e) =&gt; {
    //     scrollY.value = e.contentOffset.y;
    //   },
    // });
  
    // const animStyles = useAnimatedStyle(() =&gt; {
    //   return {
    //     height: interpolate(scrollY.value, heightInputRange, heightOutputRange),
    //     top: interpolate(scrollY.value, topInputRange, topOutputRange),
    //   }
    // })
  
    const scrollY = new Animated.Value(0);
    const scrollHandler = Animated.event([
      {
        nativeEvent: {
          contentOffset: {
            y: scrollY
          }
        }
      }
    ])
    const animStyles = {
      height: interpolateNode(scrollY, { 
        inputRange: heightInputRange,
        outputRange: heightOutputRange,
        extrapolateRight: Extrapolate.CLAMP,
      }),
      top: interpolateNode(scrollY, { 
        inputRange: topInputRange,
        outputRange: topOutputRange,
        extrapolateLeft: Extrapolate.CLAMP,
      }),
    }
  
    return (
      &lt;View style={{ flex: 1 }}&gt;
        &lt;Animated.Image
          style={[styles.image, animStyles]}
          source={{ uri: IMAGE_URI }}
        /&gt;
  
        &lt;Animated.ScrollView
          scrollEventThrottle={1}
          style={StyleSheet.absoluteFill}
          onScroll={scrollHandler}
        &gt;
          &lt;View style={{ height: HEADER_IMAGE_HEIGHT + 200 }} /&gt;
          {Array.from({ length: 50 }).map((v, idx) =&gt; {
            return (
              &lt;View key={idx}&gt;
                &lt;Text&gt;{idx}&lt;/Text&gt;
              &lt;/View&gt;
            )
          })}
        &lt;/Animated.ScrollView&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>You could check up the snack here :- <a href="https://snack.expo.io/@sapien/tactless-orange" rel="nofollow noreferrer">https://snack.expo.io/@sapien/tactless-orange</a>.</p>
  <p>Questions :-</p>
  <ol>
  <li>What is the difference between <code>interpolate</code> and <code>interpolateNode</code>?</li>
  <li>How to choose between using either of them?</li>
  <li>Why is one much performant than the other?</li>
  </ol>