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

from: getProgressFromValue(0, duration, marker.from),
        to: getProgressFromValue(0, duration, marker.to)
      });

      if (output.get) {
        acc.initialValues[targetIndex] = output.get();
      }

      return acc;
    }, { initialValues: [], targets: [], fragments: [] });

  const numMarkers = markers.fragments.length;

  return tween({
    duration,
    ease: easing.linear,
    ...props,
    onUpdate: (v) => {
      // First iterate over output targets, and try to find an active tween
      for (let i = 0; i < numMarkers; i++) {
        const fragments = markers.fragments[i];
        const numFragments = fragments.length;
        let foundActiveFragment = false;
        let prevProgressDistance = Infinity;
        let closestIndex = 0;
        let closestProgress = 0;
        let tweenHasStarted = false;
        let j = 0;

        while (!foundActiveFragment && j < numFragments) {
          const fragment = fragments[j];
          const progress = getProgressFromValue(fragment.from, fragment.to, v);

// https://popmotion.io/pose/learn/custom-transitions/
const GridProps = {
  preEnter: {
    x: -1000,
    opacity: 0
  },
  enter: {
    x: 0,
    opacity: 1,
    delayChildren: animationTimings.gridEnter,
    staggerChildren: 80,
    transition: {
      opacity: {
        duration: animationTimings.gridEnter,
        ease: easing.linear
      },
      x: { type: 'spring' }
    }
  },
  exit: {
    x: 1000,
    opacity: 0,
    delay: 800,
    staggerChildren: 50,
    transition: {
      opacity: {
        duration: animationTimings.gridLeave,
        ease: easing.linear
      },
      x: { type: 'spring' }
    }

from: { scaleY: 1 },
      to: { scaleY: 0 },
      duration: 300,
      flip: 1
    });

    keyframes({
      values: [
        { originX: 0, originY: 0, rotate: 0 },
        { rotate: 8 },
        { rotate: 0 },
        { rotate: -10 },
        { rotate: 0 }
      ],
      duration: 3000,
      ease: easing.linear,
      loop: Infinity
    }).start(body.set);

    const eyeLeftAction = action(({ complete }) => {
      showEye.start({
        update: eyeLeft.set,
        complete: () => {
          complete();
          setInterval(() => blinkEye.start({ update: eyeLeft.set }), 2000);
        }
      });
    });

    const eyeRightAction = action(({ complete }) => {
      showEye.start({
        update: eyeRight.set,

cancelModal = () => {
    this.animation = timeline([
      {
        track: 'modal',
        duration: 200,
        from: { y: 0, opacity: 1 },
        to: { y: 100, opacity: 0 },
        ease: { y: easing.easeIn, opacity: easing.linear }
      },
      '-100',
      { track: 'shade', from: 1, to: 0, ease: easing.linear, duration: 200 }
    ]).start({
      update: this.setStylers,
      complete: this.closeModal
    });
  };

top: originalRect.top,
				left: originalRect.left,
				width: originalRect.width,
				height: originalRect.height,
				...options
			});

			document.body.appendChild(originalCloneContainer);

			const hide = styler => t =>
				styler.set({ opacity: t, visibility: t ? "visible" : "hidden" });

			const hiddenTransition = keyframes({
				values: [1, 0],
				times: [0, 0.1],
				easings: easing.linear
			});

			const diffStyle = diffRect(targetRect, originalRect);

			const translateIn = keyframes({
				values: [
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 },
					diffStyle
				],
				easings: easing.linear
			});

			const fadeOut = keyframes({
				values: [{ opacity: 1 }, { opacity: 0 }],
				easings: easing.linear,
				times: [0.9, 1]

startAnimation = () => {
    this.animation = keyframes({
      values: [GREEN, ACTION, BRAND, ENTITY, GREEN],
      duration: 10000,
      ease: easing.linear,
      loop: Infinity
    }).start(v => this.boxStyler.set('background', v));
  };

const burnColor = BURN_COLORS[i];
      const nextBurnColor = BURN_COLORS[nextIndex];

      return composite({
        top: colorTween({
          from: color,
          to: nextColor,
          duration: COLOR_SEGMENT_DURATION,
          ease: easing.linear,
          i
        }),
        bottom: colorTween({
          from: burnColor,
          to: nextBurnColor,
          duration: COLOR_SEGMENT_DURATION,
          ease: easing.linear,
          i
        })
      }).output(setBackgroundGradient(i));
    });

easings: easing.linear
			});

			const diffStyle = diffRect(targetRect, originalRect);

			const translateIn = keyframes({
				values: [
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 },
					diffStyle
				],
				easings: easing.linear
			});

			const fadeOut = keyframes({
				values: [{ opacity: 1 }, { opacity: 0 }],
				easings: easing.linear,
				times: [0.9, 1]
			});

			targetStyler.set({
				"transform-origin": "top left",
				visibility: "visible"
			});

			const diffTargetStyles = diffRect(originalRect, targetRect);

			const translateFrom = keyframes({
				values: [
					{ ...diffTargetStyles },
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 }
				],
				easings: easing.linear

const fadeOuts = this.fadeOutElements.map(({ element, options = {} }) =>
			tween({
				from: 1,
				to: 0,
				ease: easing.linear,
				duration: duration / 2,
				...options
			}).start(v => (element.style.opacity = v))
		);