Проблемы с анимацией фонового изображения

Question

Я пытаюсь воссоздать анимацию дриблинга, чтобы улучшить свои дизайнерские навыки. Эта конкретная анимация смутила меня. После анимации нижнего листа действий фоновое изображение анимируется по оси Y, но анимация отключена по сравнению с исходной анимацией.

Моя попытка

Оригинальная анимация

2

Ссылка на оригинальную анимацию https://dribbble.com/shots/4038053-Tasty-Burger-App

Мой наивный подход состоял в том, чтобы посмотреть, справлюсь ли я с анимацией, обернув компонент ImageBackground в компонент Animated.View и анимировав yAxis с помощью функции spring. Мой рендер выглядит так

const animatedStyles = {
      transform: [{ translateY: this.state.yAxis }]
    };
<Animated.View style={animatedStyles}>
        <ImageBackground
          source={require('./assets/burger.png')}
          style={styles.ImageBackground}
          resizeMode="cover"
        >
        </ImageBackground>
</Animated.View> 

А код, который я использую для анимации, находится здесь:

openMenu = () => {
    this.setState({
      animatePanel: !this.state.animatePanel
    });
    this.state.animatePanel
      ? Animated.spring(this.state.yAxis, {
          toValue: -1,
          duration: 100,
          useNativeDriver: true
        }).start()
      : Animated.spring(this.state.yAxis, {
          toValue: -50,
          duration: 100,
          useNativeDriver: true
        }).start();
  };

Я новичок, поэтому, если есть какие-то учебные пособия, которые помогут мне решить эту проблему, я бы также принял это как ответ.