How to use the popmotion.easing.easeInOut function in popmotion

Watch,
} from 'vue-property-decorator';
import { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue';
import { Location } from 'vue-router/types/router';

import { IconControl } from '@void/controls/base/VdControl';

import { VdMenu } from '@void/controls/navigation/menu/VdMenu';
import { VdMenuItem } from '@void/controls/navigation/menu/VdMenuItem';
import { VdMenuItemGroup } from '@void/controls/navigation/menu/VdMenuItemGroup';
import { MenuItem, MenuItemGroup } from '@void/controls/navigation/menu/VdMenuModels';

import { easing, styler, tween } from 'popmotion';
import { Styler } from 'stylefire';

const ease: easing.Easing = easing.easeInOut;
const duration: number = 300;

/**
 * Control SubMenu
 */
@Component
export class VdSubMenu extends Vue implements IconControl {
  // tslint:disable-next-line:no-null-keyword
  private menu: VdMenu | null = null;

  @Prop({ type: String, required: true })
  public readonly subMenuLabel!: string;

  @Prop({ type: String })
  public readonly icon!: string;

initial: parseFloat(initial[0], 10),
        step: (50 - parseFloat(initial[0], 10)) / 100,
        alpha: parseFloat(initial[0], 10) > 50 ? -1 : 1,
      },
      bottom: {
        initial: parseFloat(initial[1], 10),
        step: (50 - parseFloat(initial[1], 10)) / 100,
        alpha: parseFloat(initial[1], 10) > 50 ? -1 : 1,
      },
    };

    this.shapeRenderer = css(this.shape);
    this.tween = tween({
      to: this.totalSteps,
      duration: 30,
      ease: easing.easeInOut,
      onUpdate: (x) => {
        const nextLeft = this.configs.left.initial +
          (this.props.percentage * this.configs.left.step);
        const nextBottom = this.configs.bottom.initial +
          (this.props.percentage * this.configs.bottom.step);
        this.progress = x;
        this.shapeRenderer.set('bottom', `${nextBottom}%`);
        this.shapeRenderer.set('left', `${nextLeft}%`);
      },
    });
  }

handleExit = () => {
    tween({ from: this.opacity.get(), to: 1, duration: 700, ease: easing.easeInOut }).start(this.opacity);

    this.tweenValue = this.opacity;
  };

startAnimation() {
    this.animation = keyframes({
      values: [
        { x: 0, y: 0, rotateY: 0, backgroundColor: ENTITY },
        { x: 300, y: 0, rotateY: 180, rotateX: 0, backgroundColor: GREEN },
        { x: 300, y: 200, rotateY: 180, rotateX: 180, backgroundColor: GREEN },
        { x: 0, y: 200, rotateY: 0, rotateX: 180, backgroundColor: ENTITY },
        { x: 0, y: 0, rotateY: 0, rotateX: 0, backgroundColor: ENTITY }
      ],
      duration: 3000,
      easings: [
        easing.easeInOut,
        easing.easeInOut,
        easing.easeInOut,
        easing.easeInOut
      ],
      loop: Infinity
    }).start(this.boxStyler.set);
  }

height => {
        tween({
          from: this.height.get(),
          to: height,
          duration: 500,
          ease: easing.easeInOut,
        }).start(this.height);
      },
      true,

handleEnter = () => {
    tween({ from: 0, to: this.opacity.get(), duration: 700, ease: easing.easeInOut }).start(this.opacity);

    this.tweenValue = this.opacity;
  };

handleExit = () => {
    tween({
      from: this.opacity.get(),
      to: 0,
      duration: 700,
      ease: easing.easeInOut,
    }).start(this.opacity);

    this.tweenValue = this.opacity;
  };

size => {
        tween({
          from: this.size.get(),
          to: size,
          duration: 1000,
          ease: easing.easeInOut,
        }).start(this.size);
      },
      { equals: comparer.structural },

position => {
        tween({
          from: this.position.get(),
          to: position,
          duration: 1000,
          ease: easing.easeInOut,
        }).start(this.position);
      },
      { equals: comparer.structural },