How to use the shifty.tween function in shifty

export default function tweenExtender(
    target,
    {
        duration = 1000,
        easing = 'easeOutQuad',
        resetValue = target(),
        resetOnChange = false,
        useDiscreteValues = false
    }
) {
    const result  = ko.observable(resetValue);
    tween({
        from: { val: resetValue },
        to: { val: target() },
        duration: duration,
        easing: easing,
        step: ({ val }) => result(val)
    });

    // Create a pure observable to control the life time of the subscription
    // and to allow for automatic disposing in order to prevent memory leaks.
    const pure = ko.pureComputed(
        useDiscreteValues ? () => Math.round(result()) : result
    );

    let subscription;
    pure.subscribe(() => {
        subscription = target.subscribe(val =>

[menuKey]: {
          ...this.state[menuKey],
          ...newState
        }
      });
    };
    const { updateIsAnimating } = this.props;
    const alreadyDone =
      (!nowOpen && this.state[menuKey].scalar === 0) ||
      (nowOpen && this.state[menuKey].scalar === 1);
    if (alreadyDone) {
      if (cb && typeof cb === "function") cb();
      updateIsAnimating(false);
    } else {
      const baseMenuState = { open: nowOpen };
      const currentTween = tween({
        from: { value: this.state[menuKey].scalar },
        to: { value: nowOpen ? 1 : 0 },
        duration: 500,
        easing: "easeOutQuad",
        step: newState => {
          setMenuState(
            Object.assign({}, baseMenuState, { scalar: newState.value })
          );
        }
      }).then(() => {
        updateIsAnimating(false);
        if (cb && typeof cb === "function") cb();
        setMenuState({ locked: false, currentTween: null });
      });
      updateIsAnimating(true);
      setMenuState({ currentTween });

onState(height, animate) {
        const lastHeight = this.height() || 0;

        if (animate) {
            tween({
                duration: 1000,
                delay: 350,
                easing: 'easeOutQuad',
                step: this.onStep,
                from: { val: lastHeight },
                to: { val: height }
            });
        } else {
            this.height(height);
        }
    }

function _startFakeProgress(stepCallback) {
    return tween({
        from: { val: 0 },
        to: { val: .95 },
        delay: 1000,
        duration: 4 * 60 * 1000,
        easing: 'linear',
        step: ({ val }) => stepCallback(val)
    });
}

export function animate (el, props, duration) {
  const initialProps = {}

  Object.keys(props).forEach(function (prop) {
    initialProps[prop] = el[prop] || 0
  })

  tween({
    from: initialProps,
    to: props,
    duration: duration,
    step: (state) => Object.assign(el, state)
  })
}

const doCarouselTween = (from, to, cb) =>
      tween({
        from: { value: from },
        to: { value: to },
        duration: 500,
        easing: "easeOutQuad",
        step: stepObj => {
          if (this.componentWrapper)
            this.setState({ heroCategoryOpacity: stepObj.value });
        }
      }).then(cb);