storybook/app/react-native/src/preview/components/OnDeviceUI/animation.ts

import { Animated } from 'react-native';
import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';

const PREVIEW_SCALE = 0.3;

const panelWidth = (width: number) => width * (1 - PREVIEW_SCALE - 0.05);

export const getNavigatorPanelPosition = (animatedValue: Animated.Value, previewWidth: number) => {
  return [
    {
      transform: [
        {
          translateX: animatedValue.interpolate({
            inputRange: [NAVIGATOR, PREVIEW],
            outputRange: [0, -panelWidth(previewWidth) - 1],
          }),
        },
      ],
      width: panelWidth(previewWidth),
    },
  ];
};

export const getAddonPanelPosition = (animatedValue: Animated.Value, previewWidth: number) => {
  return [
    {
      transform: [
        {
          translateX: animatedValue.interpolate({
            inputRange: [PREVIEW, ADDONS],
            outputRange: [previewWidth, previewWidth - panelWidth(previewWidth)],
          }),
        },
      ],
      width: panelWidth(previewWidth),
    },
  ];
};

export const getPreviewPosition = (
  animatedValue: Animated.Value,
  previewWidth: number,
  previewHeight: number,
  slideBetweenAnimation: boolean
) => {
  const translateX = previewWidth / 2 - (previewWidth * PREVIEW_SCALE) / 2 - 6;
  const translateY = -(previewHeight / 2 - (previewHeight * PREVIEW_SCALE) / 2 - 12);

  return {
    transform: [
      {
        translateX: animatedValue.interpolate({
          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
          outputRange: [translateX, 0, -translateX],
        }),
      },
      {
        translateY: animatedValue.interpolate({
          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
          outputRange: [translateY, slideBetweenAnimation ? translateY : 0, translateY],
        }),
      },
    ],
  };
};

export const getPreviewScale = (animatedValue: Animated.Value, slideBetweenAnimation: boolean) => {
  return {
    transform: [
      {
        scale: animatedValue.interpolate({
          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
          outputRange: [PREVIEW_SCALE, slideBetweenAnimation ? PREVIEW_SCALE : 1, PREVIEW_SCALE],
        }),
      },
    ],
  };
};