How to use the shifty.Tweenable function in shifty

let start = 0
    let allPorts = canvas.getAllPorts().clone()
    allPorts.each(function (i, element) {
      if (typeof element.__beforeInflate === "undefined") {
        element.__beforeInflate = element.getWidth()
      }
      start = element.__beforeInflate
    })


    // animate the resize of the ports
    //
    allPorts.grep(function (p) {
      return (p.NAME != figure.NAME && p.parent !== figure.parent) || (p instanceof draw2d.HybridPort) || (figure instanceof draw2d.HybridPort)
    })
    this.tweenable = new Tweenable()
    this.tweenable.tween({
      from: {'size': start / 2},
      to: {'size': start},
      duration: 200,
      easing: "easeOutSine",
      step: function (params) {
        allPorts.each(function (i, element) {
          // IMPORTANT shortcut to avoid rendering errors!!
          // performance shortcut to avoid a lot of events and recalculate/routing of all related connections
          // for each setDimension call. Additional the connection is following a port during Drag&Drop operation
          element.shape.attr({rx: params.size, ry: params.size})
          element.width = element.height = params.size * 2
        })
      }
    })

setZoom: function (zoomFactor, animated) {

    // determine the center of the current canvas. We try to keep the
    // current center during zoom operation
    //
    let scrollTop = this.canvas.getScrollTop()
    let scrollLeft = this.canvas.getScrollLeft()
    let scrollWidth = this.canvas.getScrollArea().width()
    let scrollHeight = this.canvas.getScrollArea().width()
    let centerY = scrollTop + (scrollHeight / 2) * this.canvas.zoomFactor
    let centerX = scrollLeft + (scrollWidth / 2) * this.canvas.zoomFactor

    if (animated) {
      let myTweenable = new Tweenable()
      myTweenable.tween({
        from: {'x': this.canvas.zoomFactor},
        to: {'x': zoomFactor},
        duration: 300,
        easing: "easeOutSine",
        step: params => {
          this._zoom(params.x, centerX, centerY)
        },
        finish: state => {
          this.debouncedZoomedCallback()
        }
      })
    }
    else {
      this._zoom(zoomFactor, {x: centerX, y: centerY})
      this.debouncedZoomedCallback()

enableSmoothMotion() {
        /*this.smooth = new Smooth.Controller({
            speed: (val) => { console.log("speed => " + Number(val).toFixed(2)); },
            target: () => { return this.value; },
            stop: () => { console.log("stop"); }
        });*/
        this.tweener = new shifty.Tweenable();
    }

componentDidMount() {
    this._tweenable = new Tweenable();

    if (this.props.isLoading) {
      this.begin();
    }
  }

onPanningEnd: function () {
    this.panning = false

    let tweenable = new Tweenable()
    tweenable.tween({
      from: {grow: this.thumbGrow},
      to: {grow: 0},
      duration: 300,
      easing: 'easeOutQuart',
      step: function (state) {
        this.thumbGrow = state.grow
        this.repaint()
      }.bind(this),
      finish: function () {
        tweenable.dispose()
      }
    })
    this.thumbGrow = 0
    this.repaint()
  },

setZoom: function (zoomFactor, animated) {
    let canvas = this.canvas

    let _zoom = function (z) {
      canvas.zoomFactor = Math.min(Math.max(0.01, z), 10)

      let viewBoxWidth = (canvas.initialWidth * (canvas.zoomFactor)) | 0
      let viewBoxHeight = (canvas.initialHeight * (canvas.zoomFactor)) | 0

      canvas.paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight)

      canvas.fireEvent("zoom", {value: canvas.zoomFactor})
    }

    if (animated) {
      let myTweenable = new Tweenable()
      myTweenable.tween({
        from: {'x': canvas.zoomFactor},
        to: {'x': zoomFactor},
        duration: 300,
        easing: "easeOutSine",
        step: params => _zoom(params.x),
        finish: state => canvas.fireEvent("zoomed", {value: canvas.zoomFactor})
      })
    }
    else {
      _zoom(zoomFactor)
      canvas.fireEvent("zoomed", {value: canvas.zoomFactor})
    }
  }
})