How to use the @popmotion/popcorn.clamp function in @popmotion/popcorn

canvas.addEventListener('wheel', e => {
      e.preventDefault();
      const zoomFactor = 1 + (e.deltaY * devicePixelRatio) / zoomWheelConstant;
      zoomTo(
        // Generating a zoom from the wheel delta
        clamp(1 - zoomClamp, 1 + zoomClamp, zoomFactor),
        // Convert the cursor to an origin
        runtime.viewerToWorld(e.pageX * devicePixelRatio - canvasPos.left, e.pageY * devicePixelRatio - canvasPos.top),
        true
      );
    });
  }

const findIndex = (i, y) => {
    // Could use a ref with offsetTop
    const baseY = totalHeight * i
    const totalY = baseY + y
    return clamp(0, initialColors.length - 1, Math.round(totalY / totalHeight))
}

// constPowerEase
} from './utils';

const resetTranslate = {
  translateX: 0,
  translateY: 0,
  scaleX: 1,
  scaleY: 1,
};

const ease = cubicBezier(0.9, 0.9, 0.37, 0.98);
const easeRev = reversed(ease);
const easeInOut = cubicBezier(0.5, 0.5, 0, 1);

const delaysRatio = 0.1;
const halfClampEnd = clamp(1 - delaysRatio, 1);
const halfClampStart = clamp(0, delaysRatio);
const easeFast = x =>
  easeInOut(interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x)));
const easeSlow = x =>
  easeInOut(interpolate([0, delaysRatio], [0, 1])(halfClampStart(x)));

export default function({
  from,
  to,
  rectFrom,
  rectTo,
  fromValue = 0,
  initialVelocity,
  onUpdate = () => {},
  onStart = () => {},
  onStop = () => {},

import { Action } from '../../action';
import { easeOut, Easing, linear } from '@popmotion/easing';
import { clamp, progress } from '@popmotion/popcorn';
import { Update } from '../../observer/types';
import tween from '../tween';
import scrubber from '../tween/scrubber';
import { KeyframesProps } from './types';

const clampProgress = clamp(0, 1);

const defaultEasings = (values: number[], easing?: Easing): Easing[] =>
  values.map((): Easing => easing || easeOut).splice(0, values.length - 1);

const defaultTimings = (values: number[]): number[] => {
  const numValues = values.length;

  return values.map(
    (value: number, i: number): number => (i !== 0 ? i / (numValues - 1) : 0)
  );
};

// TODO: Consolidate with `interpolate` transformer and keep this DRY
const interpolateScrubbers = (
  input: number[],
  scrubbers: Action[],

function useFade(opts) {
    if (opts === void 0) { opts = defaultsOptions; }
    var options = __assign({}, defaultsOptions, opts);
    var getMargins = options.getMargins, isInitial = options.isInitial, delaysRatio = options.delaysRatio;
    var prevNodeRef = react_1.useRef();
    var cloneContainerRef = react_1.useRef();
    var isMountedRef = react_1.useRef();
    var cleanup = function () {
        if (!cloneContainerRef.current)
            return;
        prevNodeRef.current.style.visibility = null;
        options.portalElement.removeChild(cloneContainerRef.current);
        cloneContainerRef.current = null;
    };
    var halfClampEnd = popcorn_1.clamp(1 - delaysRatio, 1);
    var easeFast = function (x) {
        return easing_1.easeInOut(Number(popcorn_1.interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))));
    };
    var spring = new wobble_1.Spring(__assign({ fromValue: Number(isInitial), toValue: Number(!isInitial) }, options.spring));
    spring
        .onUpdate(function (s) {
        if (!cloneContainerRef.current)
            return;
        cloneContainerRef.current.style.opacity = String(easeFast(s.currentValue));
    })
        .onStop(cleanup);
    var getRef = react_1.useCallback(function (n) {
        var node = n || prevNodeRef.current;
        var hasNode = !!node;
        if (hasNode && isMountedRef.current) {
            node.style.visibility = 'visible';

        getElapsed: () => clamp(0, duration, elapsed),
        getProgress: () => currentProgress,

export default function useFade(opts: FadeOptions = defaultsOptions) {
  const options = { ...defaultsOptions, ...opts };
  const { getMargins, isInitial, delaysRatio } = options;

  const prevNodeRef = useRef() as React.MutableRefObject;
  const cloneContainerRef = useRef() as React.MutableRefObject;
  const isMountedRef = useRef() as React.MutableRefObject;

  const cleanup = () => {
    if (!cloneContainerRef.current) return;
    prevNodeRef.current.style.visibility = null;
    options.portalElement.removeChild(cloneContainerRef.current);
    cloneContainerRef.current = null;
  };

  const halfClampEnd = clamp(1 - delaysRatio, 1);
  const easeFast = (x: number) =>
    easeInOut(
      Number(interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))),
    );

  const spring = new Spring({
    fromValue: Number(isInitial),
    toValue: Number(!isInitial),
    ...options.spring,
  });

  spring
    .onUpdate(s => {
			if (!cloneContainerRef.current) return;

      cloneContainerRef.current.style.opacity = String(

} from './utils';

const resetTranslate = {
  translateX: 0,
  translateY: 0,
  scaleX: 1,
  scaleY: 1,
};

const ease = cubicBezier(0.9, 0.9, 0.37, 0.98);
const easeRev = reversed(ease);
const easeInOut = cubicBezier(0.5, 0.5, 0, 1);

const delaysRatio = 0.1;
const halfClampEnd = clamp(1 - delaysRatio, 1);
const halfClampStart = clamp(0, delaysRatio);
const easeFast = x =>
  easeInOut(interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x)));
const easeSlow = x =>
  easeInOut(interpolate([0, delaysRatio], [0, 1])(halfClampStart(x)));

export default function({
  from,
  to,
  rectFrom,
  rectTo,
  fromValue = 0,
  initialVelocity,
  onUpdate = () => {},
  onStart = () => {},
  onStop = () => {},
  willBack,

import sync, { cancelSync } from 'framesync';
import { clamp, progress } from '@popmotion/popcorn';
import action, { Action } from '../../action';
import { mix } from '@popmotion/popcorn';
import { easeOut } from '@popmotion/easing';
import { IObserver } from '../../observer/types';
import scrubber from './scrubber';
import { TweenInterface, TweenProps } from './types';
import { Process } from 'framesync';

const clampProgress = clamp(0, 1);

const tween = (props: TweenProps = {}): Action =>
  action(
    ({ update, complete }: IObserver): TweenInterface => {
      const {
        duration = 300,
        ease = easeOut,
        flip = 0,
        loop = 0,
        yoyo = 0,
        repeatDelay = 0
      } = props;
      let {
        from = 0,
        to = 1,
        elapsed = 0,