Framer X Data and props Animation

LayerComponent.tsx

import * as React from "react";
import {
  Frame,
  Data,
  Animatable,
  animate,
  PropertyControls,
  ControlType
} from "framer";

// Define type of property
interface Props {
  width: number;
  height: number;
  xStart: number;
  yStart: number;
  xEnd: number;
  yEnd: number;
  animTime: number;
}

const app = Data({
  xStart: Animatable(0),
  yStart: Animatable(0),
  xEnd: Animatable(0),
  yEnd: Animatable(0),
  animTime: Animatable(0.3)
});

export class LayerComponent extends React.Component<
  Partial<Props>,
  { width: number; height: number }
> {
  // Set default properties
  static defaultProps = {
    xStart: app.xStart,
    yStart: app.yStart,
    xEnd: app.xEnd,
    yEnd: app.yEnd,
    animTime: app.animTime
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    xStart: { type: ControlType.Number, title: "xStart" },
    yStart: { type: ControlType.Number, title: "yStart" },
    xEnd: { type: ControlType.Number, title: "xEnd" },
    yEnd: { type: ControlType.Number, title: "yEnd" },
    animTime: {
      type: ControlType.Number,
      max: 2,
      min: 0,
      step: 0.05,
      title: "duration"
    }
  };

  moveX() {
    const { width, height, xStart, yStart, xEnd, yEnd, animTime } = this.props;
    animate.easeOut(xStart, xEnd, animTime);
  }

  render() {
    const { width, height, xStart, yStart, xEnd, yEnd, animTime } = this.props;
    return (
      <Frame
        width={50}
        height={50}
        top={yStart}
        left={xStart}
        onTap={this.moveX}
        style={style}
      >
        hello
      </Frame>
    );
  }
}

const style: React.CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  color: "#8855FF",
  background: "rgba(136, 85, 255, 0.1)",
  overflow: "hidden"
};