How to use @popmotion/popcorn - 10 common examples

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[],

applyOverlayStyle,
  diffRect,
  getTransformString,
  cloneElement,
  lerp,
  // 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,

getTransformString,
  cloneElement,
  lerp,
  // 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,

!session.current ||
            !lastMoveEvent.current ||
            !lastMoveEventInfo.current
        ) {
            warning(false, "onPointerMove fired without pointer session")
            cancelPan()
            return
        }

        const info = getPanInfo(lastMoveEventInfo.current)
        const panStarted = session.current.startEvent !== undefined

        // Only start panning if the offset is larger than 3 pixels. If we make it
        // any larger than this we'll want to reset the pointer history
        // on the first update to avoid visual snapping to the cursoe.
        const distancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3

        if (!panStarted && !distancePastThreshold) return

        const { point } = info
        const { timestamp } = getFrameData()
        session.current.pointHistory.push({ ...point, timestamp })

        const { onPanStart, onPan } = handlersRef.current

        if (!panStarted) {
            onPanStart && onPanStart(lastMoveEvent.current, info)
            session.current.startEvent = lastMoveEvent.current
        }

        onPan && onPan(lastMoveEvent.current, info)
    }

if (v >= input[finalInputIndex]) {
      subs[finalScrubberIndex].seek(1);
    }

    let i = 1;

    // Find index of range start
    // Note: There's potentially a way of doing this without a loop
    // 1. Try tweening between 0 and numSegments - 1
    // 2. Create array of scrubbers.
    // 3. Take Math.floor(v) as index of scrubber and remainder as progress
    for (; i < rangeLength; i++) {
      if (input[i] > v || i === finalInputIndex) break;
    }

    const progressInRange = progress(input[i - 1], input[i], v);

    subs[i - 1].seek(clampProgress(progressInRange));
  };
};

diffRect,
  getTransformString,
  cloneElement,
  lerp,
  // 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,

() => {
            if (transformedValue.current) transformedValue.current.destroy()

            // This cast is needed because interpolate does not base it's return type on the to type (yet)
            const transformer = interpolate(from, to) as Transformer
            transformedValue.current = value.addChild({ transformer })
            return transformedValue.current
        },
        [value, ...from, ...to]