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

To help you get started, we’ve selected a few @popmotion/popcorn examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Popmotion / popmotion / packages / popmotion / src / animations / keyframes / index.ts View on Github external
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));
  };
};
github Popmotion / popmotion / packages / popmotion / src / transformers.ts View on Github external
export const steps = (st: number, min = 0, max = 1) => (v: number) => {
  const current = progress(min, max, v);
  return mix(min, max, stepProgress(st, current));
};
github Popmotion / popmotion / packages / popmotion / src / animations / tween / index.ts View on Github external
const updateTween = () => {
        currentProgress = clampProgress(progress(0, duration, elapsed));
        playhead.seek(currentProgress);
      };