Mission Control Dashboard - Initial implementation

This commit is contained in:
Daniel Arroyo
2026-03-27 18:36:05 +00:00
parent 257cea2c7d
commit a8fb4d4555
12516 changed files with 2307128 additions and 2 deletions

21
node_modules/motion-dom/LICENSE.md generated vendored Normal file
View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2024 [Motion](https://motion.dev) B.V.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

10014
node_modules/motion-dom/dist/cjs/index.js generated vendored Normal file

File diff suppressed because it is too large Load Diff

1
node_modules/motion-dom/dist/cjs/index.js.map generated vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,199 @@
import { MotionGlobalConfig, noop } from 'motion-utils';
import { time } from '../frameloop/sync-time.mjs';
import { JSAnimation } from './JSAnimation.mjs';
import { getFinalKeyframe } from './keyframes/get-final.mjs';
import { KeyframeResolver, flushKeyframeResolvers } from './keyframes/KeyframesResolver.mjs';
import { NativeAnimationExtended } from './NativeAnimationExtended.mjs';
import { canAnimate } from './utils/can-animate.mjs';
import { makeAnimationInstant } from './utils/make-animation-instant.mjs';
import { WithPromise } from './utils/WithPromise.mjs';
import { supportsBrowserAnimation } from './waapi/supports/waapi.mjs';
/**
* Maximum time allowed between an animation being created and it being
* resolved for us to use the latter as the start time.
*
* This is to ensure that while we prefer to "start" an animation as soon
* as it's triggered, we also want to avoid a visual jump if there's a big delay
* between these two moments.
*/
const MAX_RESOLVE_DELAY = 40;
class AsyncMotionValueAnimation extends WithPromise {
constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes, name, motionValue, element, ...options }) {
super();
/**
* Bound to support return animation.stop pattern
*/
this.stop = () => {
if (this._animation) {
this._animation.stop();
this.stopTimeline?.();
}
this.keyframeResolver?.cancel();
};
this.createdAt = time.now();
const optionsWithDefaults = {
autoplay,
delay,
type,
repeat,
repeatDelay,
repeatType,
name,
motionValue,
element,
...options,
};
const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);
this.keyframeResolver?.scheduleResolve();
}
onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
this.keyframeResolver = undefined;
const { name, type, velocity, delay, isHandoff, onUpdate } = options;
this.resolvedAt = time.now();
/**
* If we can't animate this value with the resolved keyframes
* then we should complete it immediately.
*/
let canAnimateValue = true;
if (!canAnimate(keyframes, name, type, velocity)) {
canAnimateValue = false;
if (MotionGlobalConfig.instantAnimations || !delay) {
onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
}
keyframes[0] = keyframes[keyframes.length - 1];
makeAnimationInstant(options);
options.repeat = 0;
}
/**
* Resolve startTime for the animation.
*
* This method uses the createdAt and resolvedAt to calculate the
* animation startTime. *Ideally*, we would use the createdAt time as t=0
* as the following frame would then be the first frame of the animation in
* progress, which would feel snappier.
*
* However, if there's a delay (main thread work) between the creation of
* the animation and the first committed frame, we prefer to use resolvedAt
* to avoid a sudden jump into the animation.
*/
const startTime = sync
? !this.resolvedAt
? this.createdAt
: this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY
? this.resolvedAt
: this.createdAt
: undefined;
const resolvedOptions = {
startTime,
finalKeyframe,
...options,
keyframes,
};
/**
* Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
* WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
* optimised animation.
*
* Also skip WAAPI when keyframes aren't animatable, as the resolved
* values may not be valid CSS and would trigger browser warnings.
*/
const useWaapi = canAnimateValue &&
!isHandoff &&
supportsBrowserAnimation(resolvedOptions);
const element = resolvedOptions.motionValue?.owner?.current;
let animation;
if (useWaapi) {
try {
animation = new NativeAnimationExtended({
...resolvedOptions,
element,
});
}
catch {
animation = new JSAnimation(resolvedOptions);
}
}
else {
animation = new JSAnimation(resolvedOptions);
}
animation.finished.then(() => {
this.notifyFinished();
}).catch(noop);
if (this.pendingTimeline) {
this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
this.pendingTimeline = undefined;
}
this._animation = animation;
}
get finished() {
if (!this._animation) {
return this._finished;
}
else {
return this.animation.finished;
}
}
then(onResolve, _onReject) {
return this.finished.finally(onResolve).then(() => { });
}
get animation() {
if (!this._animation) {
this.keyframeResolver?.resume();
flushKeyframeResolvers();
}
return this._animation;
}
get duration() {
return this.animation.duration;
}
get iterationDuration() {
return this.animation.iterationDuration;
}
get time() {
return this.animation.time;
}
set time(newTime) {
this.animation.time = newTime;
}
get speed() {
return this.animation.speed;
}
get state() {
return this.animation.state;
}
set speed(newSpeed) {
this.animation.speed = newSpeed;
}
get startTime() {
return this.animation.startTime;
}
attachTimeline(timeline) {
if (this._animation) {
this.stopTimeline = this.animation.attachTimeline(timeline);
}
else {
this.pendingTimeline = timeline;
}
return () => this.stop();
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
complete() {
this.animation.complete();
}
cancel() {
if (this._animation) {
this.animation.cancel();
}
this.keyframeResolver?.cancel();
}
}
export { AsyncMotionValueAnimation };
//# sourceMappingURL=AsyncMotionValueAnimation.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
class GroupAnimation {
constructor(animations) {
// Bound to accomadate common `return animation.stop` pattern
this.stop = () => this.runAll("stop");
this.animations = animations.filter(Boolean);
}
get finished() {
return Promise.all(this.animations.map((animation) => animation.finished));
}
/**
* TODO: Filter out cancelled or stopped animations before returning
*/
getAll(propName) {
return this.animations[0][propName];
}
setAll(propName, newValue) {
for (let i = 0; i < this.animations.length; i++) {
this.animations[i][propName] = newValue;
}
}
attachTimeline(timeline) {
const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
return () => {
subscriptions.forEach((cancel, i) => {
cancel && cancel();
this.animations[i].stop();
});
};
}
get time() {
return this.getAll("time");
}
set time(time) {
this.setAll("time", time);
}
get speed() {
return this.getAll("speed");
}
set speed(speed) {
this.setAll("speed", speed);
}
get state() {
return this.getAll("state");
}
get startTime() {
return this.getAll("startTime");
}
get duration() {
return getMax(this.animations, "duration");
}
get iterationDuration() {
return getMax(this.animations, "iterationDuration");
}
runAll(methodName) {
this.animations.forEach((controls) => controls[methodName]());
}
play() {
this.runAll("play");
}
pause() {
this.runAll("pause");
}
cancel() {
this.runAll("cancel");
}
complete() {
this.runAll("complete");
}
}
function getMax(animations, propName) {
let max = 0;
for (let i = 0; i < animations.length; i++) {
const value = animations[i][propName];
if (value !== null && value > max) {
max = value;
}
}
return max;
}
export { GroupAnimation };
//# sourceMappingURL=GroupAnimation.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
import { GroupAnimation } from './GroupAnimation.mjs';
class GroupAnimationWithThen extends GroupAnimation {
then(onResolve, _onReject) {
return this.finished.finally(onResolve).then(() => { });
}
}
export { GroupAnimationWithThen };
//# sourceMappingURL=GroupAnimationWithThen.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"GroupAnimationWithThen.mjs","sources":["../../../src/animation/GroupAnimationWithThen.ts"],"sourcesContent":["import { GroupAnimation } from \"./GroupAnimation\"\nimport { AnimationPlaybackControlsWithThen } from \"./types\"\n\nexport class GroupAnimationWithThen\n extends GroupAnimation\n implements AnimationPlaybackControlsWithThen\n{\n then(onResolve: VoidFunction, _onReject?: VoidFunction) {\n return this.finished.finally(onResolve).then(() => {})\n }\n}\n"],"names":[],"mappings":";;AAGM,MAAO,sBACT,SAAQ,cAAc,CAAA;IAGtB,IAAI,CAAC,SAAuB,EAAE,SAAwB,EAAA;AAClD,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAK,EAAE,CAAC,CAAC;IAC1D;AACH;;;;"}

View File

@@ -0,0 +1,390 @@
import { invariant, pipe, clamp, millisecondsToSeconds, secondsToMilliseconds } from 'motion-utils';
import { time } from '../frameloop/sync-time.mjs';
import { activeAnimations } from '../stats/animation-count.mjs';
import { mix } from '../utils/mix/index.mjs';
import { frameloopDriver } from './drivers/frame.mjs';
import { inertia } from './generators/inertia.mjs';
import { keyframes } from './generators/keyframes.mjs';
import { calcGeneratorDuration } from './generators/utils/calc-duration.mjs';
import { getGeneratorVelocity } from './generators/utils/velocity.mjs';
import { getFinalKeyframe } from './keyframes/get-final.mjs';
import { replaceTransitionType } from './utils/replace-transition-type.mjs';
import { WithPromise } from './utils/WithPromise.mjs';
const percentToProgress = (percent) => percent / 100;
class JSAnimation extends WithPromise {
constructor(options) {
super();
this.state = "idle";
this.startTime = null;
this.isStopped = false;
/**
* The current time of the animation.
*/
this.currentTime = 0;
/**
* The time at which the animation was paused.
*/
this.holdTime = null;
/**
* Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
*/
this.playbackSpeed = 1;
/**
* Reusable state object for the delay phase to avoid
* allocating a new object every frame.
*/
this.delayState = {
done: false,
value: undefined,
};
/**
* This method is bound to the instance to fix a pattern where
* animation.stop is returned as a reference from a useEffect.
*/
this.stop = () => {
const { motionValue } = this.options;
if (motionValue && motionValue.updatedAt !== time.now()) {
this.tick(time.now());
}
this.isStopped = true;
if (this.state === "idle")
return;
this.teardown();
this.options.onStop?.();
};
activeAnimations.mainThread++;
this.options = options;
this.initAnimation();
this.play();
if (options.autoplay === false)
this.pause();
}
initAnimation() {
const { options } = this;
replaceTransitionType(options);
const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;
let { keyframes: keyframes$1 } = options;
const generatorFactory = type || keyframes;
if (process.env.NODE_ENV !== "production" &&
generatorFactory !== keyframes) {
invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
}
if (generatorFactory !== keyframes &&
typeof keyframes$1[0] !== "number") {
this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
keyframes$1 = [0, 100];
}
const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
/**
* If we have a mirror repeat type we need to create a second generator that outputs the
* mirrored (not reversed) animation and later ping pong between the two generators.
*/
if (repeatType === "mirror") {
this.mirroredGenerator = generatorFactory({
...options,
keyframes: [...keyframes$1].reverse(),
velocity: -velocity,
});
}
/**
* If duration is undefined and we have repeat options,
* we need to calculate a duration from the generator.
*
* We set it to the generator itself to cache the duration.
* Any timeline resolver will need to have already precalculated
* the duration by this step.
*/
if (generator.calculatedDuration === null) {
generator.calculatedDuration = calcGeneratorDuration(generator);
}
const { calculatedDuration } = generator;
this.calculatedDuration = calculatedDuration;
this.resolvedDuration = calculatedDuration + repeatDelay;
this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
this.generator = generator;
}
updateTime(timestamp) {
const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
// Update currentTime
if (this.holdTime !== null) {
this.currentTime = this.holdTime;
}
else {
// Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
// 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
// example.
this.currentTime = animationTime;
}
}
tick(timestamp, sample = false) {
const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;
if (this.startTime === null)
return generator.next(0);
const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options;
/**
* requestAnimationFrame timestamps can come through as lower than
* the startTime as set by performance.now(). Here we prevent this,
* though in the future it could be possible to make setting startTime
* a pending operation that gets resolved here.
*/
if (this.speed > 0) {
this.startTime = Math.min(this.startTime, timestamp);
}
else if (this.speed < 0) {
this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
}
if (sample) {
this.currentTime = timestamp;
}
else {
this.updateTime(timestamp);
}
// Rebase on delay
const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
const isInDelayPhase = this.playbackSpeed >= 0
? timeWithoutDelay < 0
: timeWithoutDelay > totalDuration;
this.currentTime = Math.max(timeWithoutDelay, 0);
// If this animation has finished, set the current time to the total duration.
if (this.state === "finished" && this.holdTime === null) {
this.currentTime = totalDuration;
}
let elapsed = this.currentTime;
let frameGenerator = generator;
if (repeat) {
/**
* Get the current progress (0-1) of the animation. If t is >
* than duration we'll get values like 2.5 (midway through the
* third iteration)
*/
const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;
/**
* Get the current iteration (0 indexed). For instance the floor of
* 2.5 is 2.
*/
let currentIteration = Math.floor(progress);
/**
* Get the current progress of the iteration by taking the remainder
* so 2.5 is 0.5 through iteration 2
*/
let iterationProgress = progress % 1.0;
/**
* If iteration progress is 1 we count that as the end
* of the previous iteration.
*/
if (!iterationProgress && progress >= 1) {
iterationProgress = 1;
}
iterationProgress === 1 && currentIteration--;
currentIteration = Math.min(currentIteration, repeat + 1);
/**
* Reverse progress if we're not running in "normal" direction
*/
const isOddIteration = Boolean(currentIteration % 2);
if (isOddIteration) {
if (repeatType === "reverse") {
iterationProgress = 1 - iterationProgress;
if (repeatDelay) {
iterationProgress -= repeatDelay / resolvedDuration;
}
}
else if (repeatType === "mirror") {
frameGenerator = mirroredGenerator;
}
}
elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
}
/**
* If we're in negative time, set state as the initial keyframe.
* This prevents delay: x, duration: 0 animations from finishing
* instantly.
*/
let state;
if (isInDelayPhase) {
this.delayState.value = keyframes[0];
state = this.delayState;
}
else {
state = frameGenerator.next(elapsed);
}
if (mixKeyframes && !isInDelayPhase) {
state.value = mixKeyframes(state.value);
}
let { done } = state;
if (!isInDelayPhase && calculatedDuration !== null) {
done =
this.playbackSpeed >= 0
? this.currentTime >= totalDuration
: this.currentTime <= 0;
}
const isAnimationFinished = this.holdTime === null &&
(this.state === "finished" || (this.state === "running" && done));
// TODO: The exception for inertia could be cleaner here
if (isAnimationFinished && type !== inertia) {
state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
}
if (onUpdate) {
onUpdate(state.value);
}
if (isAnimationFinished) {
this.finish();
}
return state;
}
/**
* Allows the returned animation to be awaited or promise-chained. Currently
* resolves when the animation finishes at all but in a future update could/should
* reject if its cancels.
*/
then(resolve, reject) {
return this.finished.then(resolve, reject);
}
get duration() {
return millisecondsToSeconds(this.calculatedDuration);
}
get iterationDuration() {
const { delay = 0 } = this.options || {};
return this.duration + millisecondsToSeconds(delay);
}
get time() {
return millisecondsToSeconds(this.currentTime);
}
set time(newTime) {
newTime = secondsToMilliseconds(newTime);
this.currentTime = newTime;
if (this.startTime === null ||
this.holdTime !== null ||
this.playbackSpeed === 0) {
this.holdTime = newTime;
}
else if (this.driver) {
this.startTime = this.driver.now() - newTime / this.playbackSpeed;
}
if (this.driver) {
this.driver.start(false);
}
else {
this.startTime = 0;
this.state = "paused";
this.holdTime = newTime;
this.tick(newTime);
}
}
/**
* Returns the generator's velocity at the current time in units/second.
* Uses the analytical derivative when available (springs), avoiding
* the MotionValue's frame-dependent velocity estimation.
*/
getGeneratorVelocity() {
const t = this.currentTime;
if (t <= 0)
return this.options.velocity || 0;
if (this.generator.velocity) {
return this.generator.velocity(t);
}
// Fallback: finite difference
const current = this.generator.next(t).value;
return getGeneratorVelocity((s) => this.generator.next(s).value, t, current);
}
get speed() {
return this.playbackSpeed;
}
set speed(newSpeed) {
const hasChanged = this.playbackSpeed !== newSpeed;
if (hasChanged && this.driver) {
this.updateTime(time.now());
}
this.playbackSpeed = newSpeed;
if (hasChanged && this.driver) {
this.time = millisecondsToSeconds(this.currentTime);
}
}
play() {
if (this.isStopped)
return;
const { driver = frameloopDriver, startTime } = this.options;
if (!this.driver) {
this.driver = driver((timestamp) => this.tick(timestamp));
}
this.options.onPlay?.();
const now = this.driver.now();
if (this.state === "finished") {
this.updateFinished();
this.startTime = now;
}
else if (this.holdTime !== null) {
this.startTime = now - this.holdTime;
}
else if (!this.startTime) {
this.startTime = startTime ?? now;
}
if (this.state === "finished" && this.speed < 0) {
this.startTime += this.calculatedDuration;
}
this.holdTime = null;
/**
* Set playState to running only after we've used it in
* the previous logic.
*/
this.state = "running";
this.driver.start();
}
pause() {
this.state = "paused";
this.updateTime(time.now());
this.holdTime = this.currentTime;
}
complete() {
if (this.state !== "running") {
this.play();
}
this.state = "finished";
this.holdTime = null;
}
finish() {
this.notifyFinished();
this.teardown();
this.state = "finished";
this.options.onComplete?.();
}
cancel() {
this.holdTime = null;
this.startTime = 0;
this.tick(0);
this.teardown();
this.options.onCancel?.();
}
teardown() {
this.state = "idle";
this.stopDriver();
this.startTime = this.holdTime = null;
activeAnimations.mainThread--;
}
stopDriver() {
if (!this.driver)
return;
this.driver.stop();
this.driver = undefined;
}
sample(sampleTime) {
this.startTime = 0;
return this.tick(sampleTime, true);
}
attachTimeline(timeline) {
if (this.options.allowFlatten) {
this.options.type = "keyframes";
this.options.ease = "linear";
this.initAnimation();
}
this.driver?.stop();
return timeline.observe(this);
}
}
// Legacy function support
function animateValue(options) {
return new JSAnimation(options);
}
export { JSAnimation, animateValue };
//# sourceMappingURL=JSAnimation.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,179 @@
import { invariant, millisecondsToSeconds, secondsToMilliseconds, noop } from 'motion-utils';
import { setStyle } from '../render/dom/style-set.mjs';
import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
import { getFinalKeyframe } from './keyframes/get-final.mjs';
import { WithPromise } from './utils/WithPromise.mjs';
import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
/**
* NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
*/
class NativeAnimation extends WithPromise {
constructor(options) {
super();
this.finishedTime = null;
this.isStopped = false;
/**
* Tracks a manually-set start time that takes precedence over WAAPI's
* dynamic startTime. This is cleared when play() or time setter is called,
* allowing WAAPI to take over timing.
*/
this.manualStartTime = null;
if (!options)
return;
const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
this.isPseudoElement = Boolean(pseudoElement);
this.allowFlatten = allowFlatten;
this.options = options;
invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
const transition = applyGeneratorOptions(options);
this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
if (transition.autoplay === false) {
this.animation.pause();
}
this.animation.onfinish = () => {
this.finishedTime = this.time;
if (!pseudoElement) {
const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
if (this.updateMotionValue) {
this.updateMotionValue(keyframe);
}
/**
* If we can, we want to commit the final style as set by the user,
* rather than the computed keyframe value supplied by the animation.
* We always do this, even when a motion value is present, to prevent
* a visual flash in Firefox where the WAAPI animation's fill is removed
* during cancel() before the scheduled render can apply the correct value.
*/
setStyle(element, name, keyframe);
this.animation.cancel();
}
onComplete?.();
this.notifyFinished();
};
}
play() {
if (this.isStopped)
return;
this.manualStartTime = null;
this.animation.play();
if (this.state === "finished") {
this.updateFinished();
}
}
pause() {
this.animation.pause();
}
complete() {
this.animation.finish?.();
}
cancel() {
try {
this.animation.cancel();
}
catch (e) { }
}
stop() {
if (this.isStopped)
return;
this.isStopped = true;
const { state } = this;
if (state === "idle" || state === "finished") {
return;
}
if (this.updateMotionValue) {
this.updateMotionValue();
}
else {
this.commitStyles();
}
if (!this.isPseudoElement)
this.cancel();
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* In this method, we commit styles back to the DOM before cancelling
* the animation.
*
* This is designed to be overridden by NativeAnimationExtended, which
* will create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to also correctly calculate velocity for any subsequent animation
* while deferring the commit until the next animation frame.
*/
commitStyles() {
const element = this.options?.element;
if (!this.isPseudoElement && element?.isConnected) {
this.animation.commitStyles?.();
}
}
get duration() {
const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
return millisecondsToSeconds(Number(duration));
}
get iterationDuration() {
const { delay = 0 } = this.options || {};
return this.duration + millisecondsToSeconds(delay);
}
get time() {
return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
}
set time(newTime) {
const wasFinished = this.finishedTime !== null;
this.manualStartTime = null;
this.finishedTime = null;
this.animation.currentTime = secondsToMilliseconds(newTime);
if (wasFinished) {
this.animation.pause();
}
}
/**
* The playback speed of the animation.
* 1 = normal speed, 2 = double speed, 0.5 = half speed.
*/
get speed() {
return this.animation.playbackRate;
}
set speed(newSpeed) {
// Allow backwards playback after finishing
if (newSpeed < 0)
this.finishedTime = null;
this.animation.playbackRate = newSpeed;
}
get state() {
return this.finishedTime !== null
? "finished"
: this.animation.playState;
}
get startTime() {
return this.manualStartTime ?? Number(this.animation.startTime);
}
set startTime(newStartTime) {
this.manualStartTime = this.animation.startTime = newStartTime;
}
/**
* Attaches a timeline to the animation, for instance the `ScrollTimeline`.
*/
attachTimeline({ timeline, rangeStart, rangeEnd, observe, }) {
if (this.allowFlatten) {
this.animation.effect?.updateTiming({ easing: "linear" });
}
this.animation.onfinish = null;
if (timeline && supportsScrollTimeline()) {
this.animation.timeline = timeline;
if (rangeStart)
this.animation.rangeStart = rangeStart;
if (rangeEnd)
this.animation.rangeEnd = rangeEnd;
return noop;
}
else {
return observe(this);
}
}
}
export { NativeAnimation };
//# sourceMappingURL=NativeAnimation.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,88 @@
import { clamp } from 'motion-utils';
import { time } from '../frameloop/sync-time.mjs';
import { setStyle } from '../render/dom/style-set.mjs';
import { JSAnimation } from './JSAnimation.mjs';
import { NativeAnimation } from './NativeAnimation.mjs';
import { replaceTransitionType } from './utils/replace-transition-type.mjs';
import { replaceStringEasing } from './waapi/utils/unsupported-easing.mjs';
/**
* 10ms is chosen here as it strikes a balance between smooth
* results (more than one keyframe per frame at 60fps) and
* keyframe quantity.
*/
const sampleDelta = 10; //ms
class NativeAnimationExtended extends NativeAnimation {
constructor(options) {
/**
* The base NativeAnimation function only supports a subset
* of Motion easings, and WAAPI also only supports some
* easing functions via string/cubic-bezier definitions.
*
* This function replaces those unsupported easing functions
* with a JS easing function. This will later get compiled
* to a linear() easing function.
*/
replaceStringEasing(options);
/**
* Ensure we replace the transition type with a generator function
* before passing to WAAPI.
*
* TODO: Does this have a better home? It could be shared with
* JSAnimation.
*/
replaceTransitionType(options);
super(options);
/**
* Only set startTime when the animation should autoplay.
* Setting startTime on a paused WAAPI animation unpauses it
* (per the WAAPI spec), which breaks autoplay: false.
*/
if (options.startTime !== undefined && options.autoplay !== false) {
this.startTime = options.startTime;
}
this.options = options;
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* Rather than read committed styles back out of the DOM, we can
* create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to calculate velocity for any subsequent animation.
*/
updateMotionValue(value) {
const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
if (!motionValue)
return;
if (value !== undefined) {
motionValue.set(value);
return;
}
const sampleAnimation = new JSAnimation({
...options,
autoplay: false,
});
/**
* Use wall-clock elapsed time for sampling.
* Under CPU load, WAAPI's currentTime may not reflect actual
* elapsed time, causing incorrect sampling and visual jumps.
*/
const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
const current = sampleAnimation.sample(sampleTime).value;
/**
* Write the estimated value to inline style so it persists
* after cancel(), covering the async gap before the next
* animation starts.
*/
const { name } = this.options;
if (element && name)
setStyle(element, name, current);
motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta);
sampleAnimation.stop();
}
}
export { NativeAnimationExtended };
//# sourceMappingURL=NativeAnimationExtended.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import { NativeAnimation } from './NativeAnimation.mjs';
class NativeAnimationWrapper extends NativeAnimation {
constructor(animation) {
super();
this.animation = animation;
animation.onfinish = () => {
this.finishedTime = this.time;
this.notifyFinished();
};
}
}
export { NativeAnimationWrapper };
//# sourceMappingURL=NativeAnimationWrapper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"NativeAnimationWrapper.mjs","sources":["../../../src/animation/NativeAnimationWrapper.ts"],"sourcesContent":["import { NativeAnimation } from \"./NativeAnimation\"\nimport { AnyResolvedKeyframe } from \"./types\"\n\nexport class NativeAnimationWrapper<\n T extends AnyResolvedKeyframe\n> extends NativeAnimation<T> {\n constructor(animation: Animation) {\n super()\n\n this.animation = animation\n animation.onfinish = () => {\n this.finishedTime = this.time\n this.notifyFinished()\n }\n }\n}\n"],"names":[],"mappings":";;AAGM,MAAO,sBAEX,SAAQ,eAAkB,CAAA;AACxB,IAAA,WAAA,CAAY,SAAoB,EAAA;AAC5B,QAAA,KAAK,EAAE;AAEP,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,SAAS,CAAC,QAAQ,GAAG,MAAK;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;YAC7B,IAAI,CAAC,cAAc,EAAE;AACzB,QAAA,CAAC;IACL;AACH;;;;"}

View File

@@ -0,0 +1,12 @@
import { animateMotionValue } from '../interfaces/motion-value.mjs';
import { motionValue } from '../../value/index.mjs';
import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
function animateSingleValue(value, keyframes, options) {
const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
return motionValue$1.animation;
}
export { animateSingleValue };
//# sourceMappingURL=single-value.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"single-value.mjs","sources":["../../../../src/animation/animate/single-value.ts"],"sourcesContent":["import { animateMotionValue } from \"../interfaces/motion-value\"\nimport type {\n AnimationPlaybackControlsWithThen,\n AnyResolvedKeyframe,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n} from \"../types\"\nimport {\n motionValue as createMotionValue,\n MotionValue,\n} from \"../../value\"\nimport { isMotionValue } from \"../../value/utils/is-motion-value\"\n\nexport function animateSingleValue<V extends AnyResolvedKeyframe>(\n value: MotionValue<V> | V,\n keyframes: V | UnresolvedValueKeyframe<V>[],\n options?: ValueAnimationTransition\n): AnimationPlaybackControlsWithThen {\n const motionValue = isMotionValue(value) ? value : createMotionValue(value)\n\n motionValue.start(animateMotionValue(\"\", motionValue, keyframes, options))\n\n return motionValue.animation!\n}\n"],"names":["motionValue","createMotionValue"],"mappings":";;;;SAagB,kBAAkB,CAC9B,KAAyB,EACzB,SAA2C,EAC3C,OAAkC,EAAA;AAElC,IAAA,MAAMA,aAAW,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,KAAK,GAAGC,WAAiB,CAAC,KAAK,CAAC;AAE3E,IAAAD,aAAW,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE,EAAEA,aAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAE1E,OAAOA,aAAW,CAAC,SAAU;AACjC;;;;"}

View File

@@ -0,0 +1,18 @@
import { time } from '../../frameloop/sync-time.mjs';
import { frameData, cancelFrame, frame } from '../../frameloop/frame.mjs';
const frameloopDriver = (update) => {
const passTimestamp = ({ timestamp }) => update(timestamp);
return {
start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
stop: () => cancelFrame(passTimestamp),
/**
* If we're processing this frame we can use the
* framelocked timestamp to keep things in sync.
*/
now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
};
};
export { frameloopDriver };
//# sourceMappingURL=frame.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"frame.mjs","sources":["../../../../src/animation/drivers/frame.ts"],"sourcesContent":["import { cancelFrame, frame, frameData } from \"../../frameloop\"\nimport { time } from \"../../frameloop/sync-time\"\nimport { FrameData } from \"../../frameloop/types\"\nimport { Driver } from \"./types\"\n\nexport const frameloopDriver: Driver = (update) => {\n const passTimestamp = ({ timestamp }: FrameData) => update(timestamp)\n\n return {\n start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),\n stop: () => cancelFrame(passTimestamp),\n /**\n * If we're processing this frame we can use the\n * framelocked timestamp to keep things in sync.\n */\n now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),\n }\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,eAAe,GAAW,CAAC,MAAM,KAAI;AAC9C,IAAA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAa,KAAK,MAAM,CAAC,SAAS,CAAC;IAErE,OAAO;AACH,QAAA,KAAK,EAAE,CAAC,SAAS,GAAG,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC;AACnE,QAAA,IAAI,EAAE,MAAM,WAAW,CAAC,aAAa,CAAC;AACtC;;;AAGG;QACH,GAAG,EAAE,OAAO,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;KACzE;AACL;;;;"}

View File

@@ -0,0 +1,88 @@
import { spring } from './spring.mjs';
import { getGeneratorVelocity } from './utils/velocity.mjs';
function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
const origin = keyframes[0];
const state = {
done: false,
value: origin,
};
const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
const nearestBoundary = (v) => {
if (min === undefined)
return max;
if (max === undefined)
return min;
return Math.abs(min - v) < Math.abs(max - v) ? min : max;
};
let amplitude = power * velocity;
const ideal = origin + amplitude;
const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
/**
* If the target has changed we need to re-calculate the amplitude, otherwise
* the animation will start from the wrong position.
*/
if (target !== ideal)
amplitude = target - origin;
const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
const calcLatest = (t) => target + calcDelta(t);
const applyFriction = (t) => {
const delta = calcDelta(t);
const latest = calcLatest(t);
state.done = Math.abs(delta) <= restDelta;
state.value = state.done ? target : latest;
};
/**
* Ideally this would resolve for t in a stateless way, we could
* do that by always precalculating the animation but as we know
* this will be done anyway we can assume that spring will
* be discovered during that.
*/
let timeReachedBoundary;
let spring$1;
const checkCatchBoundary = (t) => {
if (!isOutOfBounds(state.value))
return;
timeReachedBoundary = t;
spring$1 = spring({
keyframes: [state.value, nearestBoundary(state.value)],
velocity: getGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
damping: bounceDamping,
stiffness: bounceStiffness,
restDelta,
restSpeed,
});
};
checkCatchBoundary(0);
return {
calculatedDuration: null,
next: (t) => {
/**
* We need to resolve the friction to figure out if we need a
* spring but we don't want to do this twice per frame. So here
* we flag if we updated for this frame and later if we did
* we can skip doing it again.
*/
let hasUpdatedFrame = false;
if (!spring$1 && timeReachedBoundary === undefined) {
hasUpdatedFrame = true;
applyFriction(t);
checkCatchBoundary(t);
}
/**
* If we have a spring and the provided t is beyond the moment the friction
* animation crossed the min/max boundary, use the spring.
*/
if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {
return spring$1.next(t - timeReachedBoundary);
}
else {
!hasUpdatedFrame && applyFriction(t);
return state;
}
},
};
}
export { inertia };
//# sourceMappingURL=inertia.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,50 @@
import { easeInOut, isEasingArray, easingDefinitionToFunction } from 'motion-utils';
import { interpolate } from '../../utils/interpolate.mjs';
import { defaultOffset } from '../keyframes/offsets/default.mjs';
import { convertOffsetToTimes } from '../keyframes/offsets/time.mjs';
function defaultEasing(values, easing) {
return values.map(() => easing || easeInOut).splice(0, values.length - 1);
}
function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
/**
* Easing functions can be externally defined as strings. Here we convert them
* into actual functions.
*/
const easingFunctions = isEasingArray(ease)
? ease.map(easingDefinitionToFunction)
: easingDefinitionToFunction(ease);
/**
* This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
* to reduce GC during animation.
*/
const state = {
done: false,
value: keyframeValues[0],
};
/**
* Create a times array based on the provided 0-1 offsets
*/
const absoluteTimes = convertOffsetToTimes(
// Only use the provided offsets if they're the correct length
// TODO Maybe we should warn here if there's a length mismatch
times && times.length === keyframeValues.length
? times
: defaultOffset(keyframeValues), duration);
const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
ease: Array.isArray(easingFunctions)
? easingFunctions
: defaultEasing(keyframeValues, easingFunctions),
});
return {
calculatedDuration: duration,
next: (t) => {
state.value = mapTimeToKeyframe(t);
state.done = t >= duration;
return state;
},
};
}
export { defaultEasing, keyframes };
//# sourceMappingURL=keyframes.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"keyframes.mjs","sources":["../../../../src/animation/generators/keyframes.ts"],"sourcesContent":["import {\n easeInOut,\n easingDefinitionToFunction,\n EasingFunction,\n isEasingArray,\n} from \"motion-utils\"\nimport { interpolate } from \"../../utils/interpolate\"\nimport { defaultOffset } from \"../keyframes/offsets/default\"\nimport { convertOffsetToTimes } from \"../keyframes/offsets/time\"\nimport {\n AnimationState,\n AnyResolvedKeyframe,\n KeyframeGenerator,\n ValueAnimationOptions,\n} from \"../types\"\n\nexport function defaultEasing(\n values: any[],\n easing?: EasingFunction\n): EasingFunction[] {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1)\n}\n\nexport function keyframes<T extends AnyResolvedKeyframe>({\n duration = 300,\n keyframes: keyframeValues,\n times,\n ease = \"easeInOut\",\n}: ValueAnimationOptions<T>): KeyframeGenerator<T> {\n /**\n * Easing functions can be externally defined as strings. Here we convert them\n * into actual functions.\n */\n const easingFunctions = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease)\n\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state: AnimationState<T> = {\n done: false,\n value: keyframeValues[0],\n }\n\n /**\n * Create a times array based on the provided 0-1 offsets\n */\n const absoluteTimes = convertOffsetToTimes(\n // Only use the provided offsets if they're the correct length\n // TODO Maybe we should warn here if there's a length mismatch\n times && times.length === keyframeValues.length\n ? times\n : defaultOffset(keyframeValues),\n duration\n )\n\n const mapTimeToKeyframe = interpolate<T>(absoluteTimes, keyframeValues, {\n ease: Array.isArray(easingFunctions)\n ? easingFunctions\n : defaultEasing(keyframeValues, easingFunctions),\n })\n\n return {\n calculatedDuration: duration,\n next: (t: number) => {\n state.value = mapTimeToKeyframe(t)\n state.done = t >= duration\n return state\n },\n }\n}\n"],"names":[],"mappings":";;;;;AAgBM,SAAU,aAAa,CACzB,MAAa,EACb,MAAuB,EAAA;IAEvB,OAAO,MAAM,CAAC,GAAG,CAAC,MAAM,MAAM,IAAI,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;AAC7E;SAEgB,SAAS,CAAgC,EACrD,QAAQ,GAAG,GAAG,EACd,SAAS,EAAE,cAAc,EACzB,KAAK,EACL,IAAI,GAAG,WAAW,GACK,EAAA;AACvB;;;AAGG;AACH,IAAA,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI;AACtC,UAAE,IAAI,CAAC,GAAG,CAAC,0BAA0B;AACrC,UAAE,0BAA0B,CAAC,IAAI,CAAC;AAEtC;;;AAGG;AACH,IAAA,MAAM,KAAK,GAAsB;AAC7B,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;KAC3B;AAED;;AAEG;IACH,MAAM,aAAa,GAAG,oBAAoB;;;AAGtC,IAAA,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,cAAc,CAAC;AACrC,UAAE;UACA,aAAa,CAAC,cAAc,CAAC,EACnC,QAAQ,CACX;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAI,aAAa,EAAE,cAAc,EAAE;AACpE,QAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;AAC/B,cAAE;AACF,cAAE,aAAa,CAAC,cAAc,EAAE,eAAe,CAAC;AACvD,KAAA,CAAC;IAEF,OAAO;AACH,QAAA,kBAAkB,EAAE,QAAQ;AAC5B,QAAA,IAAI,EAAE,CAAC,CAAS,KAAI;AAChB,YAAA,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC;AAClC,YAAA,KAAK,CAAC,IAAI,GAAG,CAAC,IAAI,QAAQ;AAC1B,YAAA,OAAO,KAAK;QAChB,CAAC;KACJ;AACL;;;;"}

View File

@@ -0,0 +1,329 @@
import { millisecondsToSeconds, clamp, secondsToMilliseconds, warning } from 'motion-utils';
import { generateLinearEasing } from '../waapi/utils/linear.mjs';
import { calcGeneratorDuration, maxGeneratorDuration } from './utils/calc-duration.mjs';
import { createGeneratorEasing } from './utils/create-generator-easing.mjs';
const springDefaults = {
// Default spring physics
stiffness: 100,
damping: 10,
mass: 1.0,
velocity: 0.0,
// Default duration/bounce-based options
duration: 800, // in ms
bounce: 0.3,
visualDuration: 0.3, // in seconds
// Rest thresholds
restSpeed: {
granular: 0.01,
default: 2,
},
restDelta: {
granular: 0.005,
default: 0.5,
},
// Limits
minDuration: 0.01, // in seconds
maxDuration: 10.0, // in seconds
minDamping: 0.05,
maxDamping: 1,
};
function calcAngularFreq(undampedFreq, dampingRatio) {
return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
}
const rootIterations = 12;
function approximateRoot(envelope, derivative, initialGuess) {
let result = initialGuess;
for (let i = 1; i < rootIterations; i++) {
result = result - envelope(result) / derivative(result);
}
return result;
}
/**
* This is ported from the Framer implementation of duration-based spring resolution.
*/
const safeMin = 0.001;
function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
let envelope;
let derivative;
warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
let dampingRatio = 1 - bounce;
/**
* Restrict dampingRatio and duration to within acceptable ranges.
*/
dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
if (dampingRatio < 1) {
/**
* Underdamped spring
*/
envelope = (undampedFreq) => {
const exponentialDecay = undampedFreq * dampingRatio;
const delta = exponentialDecay * duration;
const a = exponentialDecay - velocity;
const b = calcAngularFreq(undampedFreq, dampingRatio);
const c = Math.exp(-delta);
return safeMin - (a / b) * c;
};
derivative = (undampedFreq) => {
const exponentialDecay = undampedFreq * dampingRatio;
const delta = exponentialDecay * duration;
const d = delta * velocity + velocity;
const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
const f = Math.exp(-delta);
const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
return (factor * ((d - e) * f)) / g;
};
}
else {
/**
* Critically-damped spring
*/
envelope = (undampedFreq) => {
const a = Math.exp(-undampedFreq * duration);
const b = (undampedFreq - velocity) * duration + 1;
return -safeMin + a * b;
};
derivative = (undampedFreq) => {
const a = Math.exp(-undampedFreq * duration);
const b = (velocity - undampedFreq) * (duration * duration);
return a * b;
};
}
const initialGuess = 5 / duration;
const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
duration = secondsToMilliseconds(duration);
if (isNaN(undampedFreq)) {
return {
stiffness: springDefaults.stiffness,
damping: springDefaults.damping,
duration,
};
}
else {
const stiffness = Math.pow(undampedFreq, 2) * mass;
return {
stiffness,
damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
duration,
};
}
}
const durationKeys = ["duration", "bounce"];
const physicsKeys = ["stiffness", "damping", "mass"];
function isSpringType(options, keys) {
return keys.some((key) => options[key] !== undefined);
}
function getSpringOptions(options) {
let springOptions = {
velocity: springDefaults.velocity,
stiffness: springDefaults.stiffness,
damping: springDefaults.damping,
mass: springDefaults.mass,
isResolvedFromDuration: false,
...options,
};
// stiffness/damping/mass overrides duration/bounce
if (!isSpringType(options, physicsKeys) &&
isSpringType(options, durationKeys)) {
// Time-defined springs should ignore inherited velocity.
// Velocity from interrupted animations can cause findSpring()
// to compute wildly different spring parameters, leading to
// massive oscillation on small-range animations.
springOptions.velocity = 0;
if (options.visualDuration) {
const visualDuration = options.visualDuration;
const root = (2 * Math.PI) / (visualDuration * 1.2);
const stiffness = root * root;
const damping = 2 *
clamp(0.05, 1, 1 - (options.bounce || 0)) *
Math.sqrt(stiffness);
springOptions = {
...springOptions,
mass: springDefaults.mass,
stiffness,
damping,
};
}
else {
const derived = findSpring({ ...options, velocity: 0 });
springOptions = {
...springOptions,
...derived,
mass: springDefaults.mass,
};
springOptions.isResolvedFromDuration = true;
}
}
return springOptions;
}
function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
const options = typeof optionsOrVisualDuration !== "object"
? {
visualDuration: optionsOrVisualDuration,
keyframes: [0, 1],
bounce,
}
: optionsOrVisualDuration;
let { restSpeed, restDelta } = options;
const origin = options.keyframes[0];
const target = options.keyframes[options.keyframes.length - 1];
/**
* This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
* to reduce GC during animation.
*/
const state = { done: false, value: origin };
const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({
...options,
velocity: -millisecondsToSeconds(options.velocity || 0),
});
const initialVelocity = velocity || 0.0;
const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
const initialDelta = target - origin;
const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
/**
* If we're working on a granular scale, use smaller defaults for determining
* when the spring is finished.
*
* These defaults have been selected emprically based on what strikes a good
* ratio between feeling good and finishing as soon as changes are imperceptible.
*/
const isGranularScale = Math.abs(initialDelta) < 5;
restSpeed || (restSpeed = isGranularScale
? springDefaults.restSpeed.granular
: springDefaults.restSpeed.default);
restDelta || (restDelta = isGranularScale
? springDefaults.restDelta.granular
: springDefaults.restDelta.default);
let resolveSpring;
let resolveVelocity;
// Underdamped coefficients, hoisted for use in the inlined next() hot path
let angularFreq;
let A;
let sinCoeff;
let cosCoeff;
if (dampingRatio < 1) {
angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
A =
(initialVelocity +
dampingRatio * undampedAngularFreq * initialDelta) /
angularFreq;
// Underdamped spring
resolveSpring = (t) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
return (target -
envelope *
(A * Math.sin(angularFreq * t) +
initialDelta * Math.cos(angularFreq * t)));
};
// Analytical derivative of underdamped spring (px/ms)
sinCoeff =
dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq;
cosCoeff =
dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq;
resolveVelocity = (t) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
return envelope *
(sinCoeff * Math.sin(angularFreq * t) +
cosCoeff * Math.cos(angularFreq * t));
};
}
else if (dampingRatio === 1) {
// Critically damped spring
resolveSpring = (t) => target -
Math.exp(-undampedAngularFreq * t) *
(initialDelta +
(initialVelocity + undampedAngularFreq * initialDelta) * t);
// Analytical derivative of critically damped spring (px/ms)
const C = initialVelocity + undampedAngularFreq * initialDelta;
resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) *
(undampedAngularFreq * C * t - initialVelocity);
}
else {
// Overdamped spring
const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
resolveSpring = (t) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
// When performing sinh or cosh values can hit Infinity so we cap them here
const freqForT = Math.min(dampedAngularFreq * t, 300);
return (target -
(envelope *
((initialVelocity +
dampingRatio * undampedAngularFreq * initialDelta) *
Math.sinh(freqForT) +
dampedAngularFreq *
initialDelta *
Math.cosh(freqForT))) /
dampedAngularFreq);
};
// Analytical derivative of overdamped spring (px/ms)
const P = (initialVelocity +
dampingRatio * undampedAngularFreq * initialDelta) /
dampedAngularFreq;
const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq;
const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq;
resolveVelocity = (t) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
const freqForT = Math.min(dampedAngularFreq * t, 300);
return envelope *
(sinhCoeff * Math.sinh(freqForT) +
coshCoeff * Math.cosh(freqForT));
};
}
const generator = {
calculatedDuration: isResolvedFromDuration ? duration || null : null,
velocity: (t) => secondsToMilliseconds(resolveVelocity(t)),
next: (t) => {
/**
* For underdamped physics springs we need both position and
* velocity each tick. Compute shared trig values once to avoid
* duplicate Math.exp/sin/cos calls on the hot path.
*/
if (!isResolvedFromDuration && dampingRatio < 1) {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
const sin = Math.sin(angularFreq * t);
const cos = Math.cos(angularFreq * t);
const current = target -
envelope *
(A * sin + initialDelta * cos);
const currentVelocity = secondsToMilliseconds(envelope *
(sinCoeff * sin + cosCoeff * cos));
state.done =
Math.abs(currentVelocity) <= restSpeed &&
Math.abs(target - current) <= restDelta;
state.value = state.done ? target : current;
return state;
}
const current = resolveSpring(t);
if (!isResolvedFromDuration) {
const currentVelocity = secondsToMilliseconds(resolveVelocity(t));
state.done =
Math.abs(currentVelocity) <= restSpeed &&
Math.abs(target - current) <= restDelta;
}
else {
state.done = t >= duration;
}
state.value = state.done ? target : current;
return state;
},
toString: () => {
const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
return calculatedDuration + "ms " + easing;
},
toTransition: () => { },
};
return generator;
}
spring.applyToOptions = (options) => {
const generatorOptions = createGeneratorEasing(options, 100, spring);
options.ease = generatorOptions.ease;
options.duration = secondsToMilliseconds(generatorOptions.duration);
options.type = "keyframes";
return options;
};
export { spring };
//# sourceMappingURL=spring.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,18 @@
/**
* Implement a practical max duration for keyframe generation
* to prevent infinite loops
*/
const maxGeneratorDuration = 20000;
function calcGeneratorDuration(generator) {
let duration = 0;
const timeStep = 50;
let state = generator.next(duration);
while (!state.done && duration < maxGeneratorDuration) {
duration += timeStep;
state = generator.next(duration);
}
return duration >= maxGeneratorDuration ? Infinity : duration;
}
export { calcGeneratorDuration, maxGeneratorDuration };
//# sourceMappingURL=calc-duration.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"calc-duration.mjs","sources":["../../../../../src/animation/generators/utils/calc-duration.ts"],"sourcesContent":["import { KeyframeGenerator } from \"../../types\"\n\n/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nexport const maxGeneratorDuration = 20_000\nexport function calcGeneratorDuration(\n generator: KeyframeGenerator<unknown>\n): number {\n let duration = 0\n const timeStep = 50\n let state = generator.next(duration)\n while (!state.done && duration < maxGeneratorDuration) {\n duration += timeStep\n state = generator.next(duration)\n }\n\n return duration >= maxGeneratorDuration ? Infinity : duration\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACI,MAAM,oBAAoB,GAAG;AAC9B,SAAU,qBAAqB,CACjC,SAAqC,EAAA;IAErC,IAAI,QAAQ,GAAG,CAAC;IAChB,MAAM,QAAQ,GAAG,EAAE;IACnB,IAAI,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAG,oBAAoB,EAAE;QACnD,QAAQ,IAAI,QAAQ;AACpB,QAAA,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpC;IAEA,OAAO,QAAQ,IAAI,oBAAoB,GAAG,QAAQ,GAAG,QAAQ;AACjE;;;;"}

View File

@@ -0,0 +1,20 @@
import { millisecondsToSeconds } from 'motion-utils';
import { calcGeneratorDuration, maxGeneratorDuration } from './calc-duration.mjs';
/**
* Create a progress => progress easing function from a generator.
*/
function createGeneratorEasing(options, scale = 100, createGenerator) {
const generator = createGenerator({ ...options, keyframes: [0, scale] });
const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
return {
type: "keyframes",
ease: (progress) => {
return generator.next(duration * progress).value / scale;
},
duration: millisecondsToSeconds(duration),
};
}
export { createGeneratorEasing };
//# sourceMappingURL=create-generator-easing.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"create-generator-easing.mjs","sources":["../../../../../src/animation/generators/utils/create-generator-easing.ts"],"sourcesContent":["import { millisecondsToSeconds } from \"motion-utils\"\nimport { GeneratorFactory, Transition } from \"../../types\"\nimport { calcGeneratorDuration, maxGeneratorDuration } from \"./calc-duration\"\n\n/**\n * Create a progress => progress easing function from a generator.\n */\nexport function createGeneratorEasing(\n options: Transition,\n scale = 100,\n createGenerator: GeneratorFactory\n) {\n const generator = createGenerator({ ...options, keyframes: [0, scale] })\n const duration = Math.min(\n calcGeneratorDuration(generator),\n maxGeneratorDuration\n )\n\n return {\n type: \"keyframes\",\n ease: (progress: number) => {\n return generator.next(duration * progress).value / scale\n },\n duration: millisecondsToSeconds(duration),\n }\n}\n"],"names":[],"mappings":";;;AAIA;;AAEG;AACG,SAAU,qBAAqB,CACjC,OAAmB,EACnB,KAAK,GAAG,GAAG,EACX,eAAiC,EAAA;AAEjC,IAAA,MAAM,SAAS,GAAG,eAAe,CAAC,EAAE,GAAG,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;AACxE,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACrB,qBAAqB,CAAC,SAAS,CAAC,EAChC,oBAAoB,CACvB;IAED,OAAO;AACH,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,IAAI,EAAE,CAAC,QAAgB,KAAI;AACvB,YAAA,OAAO,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,KAAK,GAAG,KAAK;QAC5D,CAAC;AACD,QAAA,QAAQ,EAAE,qBAAqB,CAAC,QAAQ,CAAC;KAC5C;AACL;;;;"}

View File

@@ -0,0 +1,6 @@
function isGenerator(type) {
return typeof type === "function" && "applyToOptions" in type;
}
export { isGenerator };
//# sourceMappingURL=is-generator.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-generator.mjs","sources":["../../../../../src/animation/generators/utils/is-generator.ts"],"sourcesContent":["import { AnimationGeneratorType, GeneratorFactory } from \"../../types\"\n\nexport function isGenerator(\n type?: AnimationGeneratorType\n): type is GeneratorFactory {\n return typeof type === \"function\" && \"applyToOptions\" in type\n}\n"],"names":[],"mappings":"AAEM,SAAU,WAAW,CACvB,IAA6B,EAAA;IAE7B,OAAO,OAAO,IAAI,KAAK,UAAU,IAAI,gBAAgB,IAAI,IAAI;AACjE;;;;"}

View File

@@ -0,0 +1,10 @@
import { velocityPerSecond } from 'motion-utils';
const velocitySampleDuration = 5; // ms
function getGeneratorVelocity(resolveValue, t, current) {
const prevT = Math.max(t - velocitySampleDuration, 0);
return velocityPerSecond(current - resolveValue(prevT), t - prevT);
}
export { getGeneratorVelocity };
//# sourceMappingURL=velocity.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"velocity.mjs","sources":["../../../../../src/animation/generators/utils/velocity.ts"],"sourcesContent":["import { velocityPerSecond } from \"motion-utils\"\n\nconst velocitySampleDuration = 5 // ms\n\nexport function getGeneratorVelocity(\n resolveValue: (v: number) => number,\n t: number,\n current: number\n) {\n const prevT = Math.max(t - velocitySampleDuration, 0)\n return velocityPerSecond(current - resolveValue(prevT), t - prevT)\n}\n"],"names":[],"mappings":";;AAEA,MAAM,sBAAsB,GAAG,CAAC,CAAA;SAEhB,oBAAoB,CAChC,YAAmC,EACnC,CAAS,EACT,OAAe,EAAA;AAEf,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,sBAAsB,EAAE,CAAC,CAAC;AACrD,IAAA,OAAO,iBAAiB,CAAC,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;AACtE;;;;"}

View File

@@ -0,0 +1,104 @@
import { secondsToMilliseconds, MotionGlobalConfig } from 'motion-utils';
import { AsyncMotionValueAnimation } from '../AsyncMotionValueAnimation.mjs';
import { JSAnimation } from '../JSAnimation.mjs';
import { getValueTransition } from '../utils/get-value-transition.mjs';
import { makeAnimationInstant } from '../utils/make-animation-instant.mjs';
import { getDefaultTransition } from '../utils/default-transitions.mjs';
import { getFinalKeyframe } from '../keyframes/get-final.mjs';
import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
import { frame } from '../../frameloop/frame.mjs';
const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
const valueTransition = getValueTransition(transition, name) || {};
/**
* Most transition values are currently completely overwritten by value-specific
* transitions. In the future it'd be nicer to blend these transitions. But for now
* delay actually does inherit from the root transition if not value-specific.
*/
const delay = valueTransition.delay || transition.delay || 0;
/**
* Elapsed isn't a public transition option but can be passed through from
* optimized appear effects in milliseconds.
*/
let { elapsed = 0 } = transition;
elapsed = elapsed - secondsToMilliseconds(delay);
const options = {
keyframes: Array.isArray(target) ? target : [null, target],
ease: "easeOut",
velocity: value.getVelocity(),
...valueTransition,
delay: -elapsed,
onUpdate: (v) => {
value.set(v);
valueTransition.onUpdate && valueTransition.onUpdate(v);
},
onComplete: () => {
onComplete();
valueTransition.onComplete && valueTransition.onComplete();
},
name,
motionValue: value,
element: isHandoff ? undefined : element,
};
/**
* If there's no transition defined for this value, we can generate
* unique transition settings for this value.
*/
if (!isTransitionDefined(valueTransition)) {
Object.assign(options, getDefaultTransition(name, options));
}
/**
* Both WAAPI and our internal animation functions use durations
* as defined by milliseconds, while our external API defines them
* as seconds.
*/
options.duration && (options.duration = secondsToMilliseconds(options.duration));
options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
/**
* Support deprecated way to set initial value. Prefer keyframe syntax.
*/
if (options.from !== undefined) {
options.keyframes[0] = options.from;
}
let shouldSkip = false;
if (options.type === false ||
(options.duration === 0 && !options.repeatDelay)) {
makeAnimationInstant(options);
if (options.delay === 0) {
shouldSkip = true;
}
}
if (MotionGlobalConfig.instantAnimations ||
MotionGlobalConfig.skipAnimations ||
element?.shouldSkipAnimations) {
shouldSkip = true;
makeAnimationInstant(options);
options.delay = 0;
}
/**
* If the transition type or easing has been explicitly set by the user
* then we don't want to allow flattening the animation.
*/
options.allowFlatten = !valueTransition.type && !valueTransition.ease;
/**
* If we can or must skip creating the animation, and apply only
* the final keyframe, do so. We also check once keyframes are resolved but
* this early check prevents the need to create an animation at all.
*/
if (shouldSkip && !isHandoff && value.get() !== undefined) {
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
if (finalKeyframe !== undefined) {
frame.update(() => {
options.onUpdate(finalKeyframe);
options.onComplete();
});
return;
}
}
return valueTransition.isSync
? new JSAnimation(options)
: new AsyncMotionValueAnimation(options);
};
export { animateMotionValue };
//# sourceMappingURL=motion-value.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,100 @@
import { getValueTransition } from '../utils/get-value-transition.mjs';
import { resolveTransition } from '../utils/resolve-transition.mjs';
import { positionalKeys } from '../../render/utils/keys-position.mjs';
import { setTarget } from '../../render/utils/setters.mjs';
import { addValueToWillChange } from '../../value/will-change/add-will-change.mjs';
import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
import { animateMotionValue } from './motion-value.mjs';
import { frame } from '../../frameloop/frame.mjs';
/**
* Decide whether we should block this animation. Previously, we achieved this
* just by checking whether the key was listed in protectedKeys, but this
* posed problems if an animation was triggered by afterChildren and protectedKeys
* had been set to true in the meantime.
*/
function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
needsAnimating[key] = false;
return shouldBlock;
}
function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
let { transition, transitionEnd, ...target } = targetAndTransition;
const defaultTransition = visualElement.getDefaultTransition();
transition = transition
? resolveTransition(transition, defaultTransition)
: defaultTransition;
const reduceMotion = transition?.reduceMotion;
if (transitionOverride)
transition = transitionOverride;
const animations = [];
const animationTypeState = type &&
visualElement.animationState &&
visualElement.animationState.getState()[type];
for (const key in target) {
const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
const valueTarget = target[key];
if (valueTarget === undefined ||
(animationTypeState &&
shouldBlockAnimation(animationTypeState, key))) {
continue;
}
const valueTransition = {
delay,
...getValueTransition(transition || {}, key),
};
/**
* If the value is already at the defined target, skip the animation.
* We still re-assert the value via frame.update to take precedence
* over any stale transitionEnd callbacks from previous animations.
*/
const currentValue = value.get();
if (currentValue !== undefined &&
!value.isAnimating() &&
!Array.isArray(valueTarget) &&
valueTarget === currentValue &&
!valueTransition.velocity) {
frame.update(() => value.set(valueTarget));
continue;
}
/**
* If this is the first time a value is being animated, check
* to see if we're handling off from an existing animation.
*/
let isHandoff = false;
if (window.MotionHandoffAnimation) {
const appearId = getOptimisedAppearId(visualElement);
if (appearId) {
const startTime = window.MotionHandoffAnimation(appearId, key, frame);
if (startTime !== null) {
valueTransition.startTime = startTime;
isHandoff = true;
}
}
}
addValueToWillChange(visualElement, key);
const shouldReduceMotion = reduceMotion ?? visualElement.shouldReduceMotion;
value.start(animateMotionValue(key, value, valueTarget, shouldReduceMotion && positionalKeys.has(key)
? { type: false }
: valueTransition, visualElement, isHandoff));
const animation = value.animation;
if (animation) {
animations.push(animation);
}
}
if (transitionEnd) {
const applyTransitionEnd = () => frame.update(() => {
transitionEnd && setTarget(visualElement, transitionEnd);
});
if (animations.length) {
Promise.all(animations).then(applyTransitionEnd);
}
else {
applyTransitionEnd();
}
}
return animations;
}
export { animateTarget };
//# sourceMappingURL=visual-element-target.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,60 @@
import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
import { calcChildStagger } from '../utils/calc-child-stagger.mjs';
import { animateTarget } from './visual-element-target.mjs';
function animateVariant(visualElement, variant, options = {}) {
const resolved = resolveVariant(visualElement, variant, options.type === "exit"
? visualElement.presenceContext?.custom
: undefined);
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
if (options.transitionOverride) {
transition = options.transitionOverride;
}
/**
* If we have a variant, create a callback that runs it as an animation.
* Otherwise, we resolve a Promise immediately for a composable no-op.
*/
const getAnimation = resolved
? () => Promise.all(animateTarget(visualElement, resolved, options))
: () => Promise.resolve();
/**
* If we have children, create a callback that runs all their animations.
* Otherwise, we resolve a Promise immediately for a composable no-op.
*/
const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
? (forwardDelay = 0) => {
const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
}
: () => Promise.resolve();
/**
* If the transition explicitly defines a "when" option, we need to resolve either
* this animation or all children animations before playing the other.
*/
const { when } = transition;
if (when) {
const [first, last] = when === "beforeChildren"
? [getAnimation, getChildAnimations]
: [getChildAnimations, getAnimation];
return first().then(() => last());
}
else {
return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
}
}
function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
const animations = [];
for (const child of visualElement.variantChildren) {
child.notify("AnimationStart", variant);
animations.push(animateVariant(child, variant, {
...options,
delay: delay +
(typeof delayChildren === "function" ? 0 : delayChildren) +
calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
}).then(() => child.notify("AnimationComplete", variant)));
}
return Promise.all(animations);
}
export { animateVariant };
//# sourceMappingURL=visual-element-variant.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,27 @@
import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
import { animateTarget } from './visual-element-target.mjs';
import { animateVariant } from './visual-element-variant.mjs';
function animateVisualElement(visualElement, definition, options = {}) {
visualElement.notify("AnimationStart", definition);
let animation;
if (Array.isArray(definition)) {
const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
animation = Promise.all(animations);
}
else if (typeof definition === "string") {
animation = animateVariant(visualElement, definition, options);
}
else {
const resolvedDefinition = typeof definition === "function"
? resolveVariant(visualElement, definition, options.custom)
: definition;
animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
}
return animation.then(() => {
visualElement.notify("AnimationComplete", definition);
});
}
export { animateVisualElement };
//# sourceMappingURL=visual-element.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"visual-element.mjs","sources":["../../../../src/animation/interfaces/visual-element.ts"],"sourcesContent":["import { resolveVariant } from \"../../render/utils/resolve-dynamic-variants\"\nimport type { AnimationDefinition } from \"../../node/types\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport type { VisualElementAnimationOptions } from \"./types\"\nimport { animateTarget } from \"./visual-element-target\"\nimport { animateVariant } from \"./visual-element-variant\"\n\nexport function animateVisualElement(\n visualElement: VisualElement,\n definition: AnimationDefinition,\n options: VisualElementAnimationOptions = {}\n) {\n visualElement.notify(\"AnimationStart\", definition)\n let animation: Promise<any>\n\n if (Array.isArray(definition)) {\n const animations = definition.map((variant) =>\n animateVariant(visualElement, variant, options)\n )\n animation = Promise.all(animations)\n } else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options)\n } else {\n const resolvedDefinition =\n typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition\n\n animation = Promise.all(\n animateTarget(visualElement, resolvedDefinition, options)\n )\n }\n\n return animation.then(() => {\n visualElement.notify(\"AnimationComplete\", definition)\n })\n}\n"],"names":[],"mappings":";;;;AAOM,SAAU,oBAAoB,CAChC,aAA4B,EAC5B,UAA+B,EAC/B,UAAyC,EAAE,EAAA;AAE3C,IAAA,aAAa,CAAC,MAAM,CAAC,gBAAgB,EAAE,UAAU,CAAC;AAClD,IAAA,IAAI,SAAuB;AAE3B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,OAAO,KACtC,cAAc,CAAC,aAAa,EAAE,OAAO,EAAE,OAAO,CAAC,CAClD;AACD,QAAA,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;IACvC;AAAO,SAAA,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QACvC,SAAS,GAAG,cAAc,CAAC,aAAa,EAAE,UAAU,EAAE,OAAO,CAAC;IAClE;SAAO;AACH,QAAA,MAAM,kBAAkB,GACpB,OAAO,UAAU,KAAK;cAChB,cAAc,CAAC,aAAa,EAAE,UAAU,EAAE,OAAO,CAAC,MAAM;cACxD,UAAU;AAEpB,QAAA,SAAS,GAAG,OAAO,CAAC,GAAG,CACnB,aAAa,CAAC,aAAa,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAC5D;IACL;AAEA,IAAA,OAAO,SAAS,CAAC,IAAI,CAAC,MAAK;AACvB,QAAA,aAAa,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC;AACzD,IAAA,CAAC,CAAC;AACN;;;;"}

View File

@@ -0,0 +1,142 @@
import { positionalKeys } from '../../render/utils/keys-position.mjs';
import { findDimensionValueType } from '../../value/types/dimensions.mjs';
import { getVariableValue } from '../utils/css-variables-conversion.mjs';
import { isCSSVariableToken, containsCSSVariable } from '../utils/is-css-variable.mjs';
import { KeyframeResolver } from './KeyframesResolver.mjs';
import { isNone } from './utils/is-none.mjs';
import { makeNoneKeyframesAnimatable } from './utils/make-none-animatable.mjs';
import { positionalValues, isNumOrPxType } from './utils/unit-conversion.mjs';
class DOMKeyframesResolver extends KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
}
readKeyframes() {
const { unresolvedKeyframes, element, name } = this;
if (!element || !element.current)
return;
super.readKeyframes();
/**
* If any keyframe is a CSS variable, we need to find its value by sampling the element
*/
for (let i = 0; i < unresolvedKeyframes.length; i++) {
let keyframe = unresolvedKeyframes[i];
if (typeof keyframe === "string") {
keyframe = keyframe.trim();
if (isCSSVariableToken(keyframe)) {
const resolved = getVariableValue(keyframe, element.current);
if (resolved !== undefined) {
unresolvedKeyframes[i] = resolved;
}
if (i === unresolvedKeyframes.length - 1) {
this.finalKeyframe = keyframe;
}
}
}
}
/**
* Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes.
* This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which
* have a far bigger performance impact.
*/
this.resolveNoneKeyframes();
/**
* Check to see if unit type has changed. If so schedule jobs that will
* temporarily set styles to the destination keyframes.
* Skip if we have more than two keyframes or this isn't a positional value.
* TODO: We can throw if there are multiple keyframes and the value type changes.
*/
if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
return;
}
const [origin, target] = unresolvedKeyframes;
const originType = findDimensionValueType(origin);
const targetType = findDimensionValueType(target);
/**
* If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
* doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
*/
const originHasVar = containsCSSVariable(origin);
const targetHasVar = containsCSSVariable(target);
if (originHasVar !== targetHasVar && positionalValues[name]) {
this.needsMeasurement = true;
return;
}
/**
* Either we don't recognise these value types or we can animate between them.
*/
if (originType === targetType)
return;
/**
* If both values are numbers or pixels, we can animate between them by
* converting them to numbers.
*/
if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
for (let i = 0; i < unresolvedKeyframes.length; i++) {
const value = unresolvedKeyframes[i];
if (typeof value === "string") {
unresolvedKeyframes[i] = parseFloat(value);
}
}
}
else if (positionalValues[name]) {
/**
* Else, the only way to resolve this is by measuring the element.
*/
this.needsMeasurement = true;
}
}
resolveNoneKeyframes() {
const { unresolvedKeyframes, name } = this;
const noneKeyframeIndexes = [];
for (let i = 0; i < unresolvedKeyframes.length; i++) {
if (unresolvedKeyframes[i] === null ||
isNone(unresolvedKeyframes[i])) {
noneKeyframeIndexes.push(i);
}
}
if (noneKeyframeIndexes.length) {
makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
}
}
measureInitialState() {
const { element, unresolvedKeyframes, name } = this;
if (!element || !element.current)
return;
if (name === "height") {
this.suspendedScrollY = window.pageYOffset;
}
this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
unresolvedKeyframes[0] = this.measuredOrigin;
// Set final key frame to measure after next render
const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (measureKeyframe !== undefined) {
element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
}
}
measureEndState() {
const { element, name, unresolvedKeyframes } = this;
if (!element || !element.current)
return;
const value = element.getValue(name);
value && value.jump(this.measuredOrigin, false);
const finalKeyframeIndex = unresolvedKeyframes.length - 1;
const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
if (finalKeyframe !== null && this.finalKeyframe === undefined) {
this.finalKeyframe = finalKeyframe;
}
// If we removed transform values, reapply them before the next render
if (this.removedTransforms?.length) {
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
element
.getValue(unsetTransformName)
.set(unsetTransformValue);
});
}
this.resolveNoneKeyframes();
}
}
export { DOMKeyframesResolver };
//# sourceMappingURL=DOMKeyframesResolver.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,148 @@
import { fillWildcards } from './utils/fill-wildcards.mjs';
import { removeNonTranslationalTransform } from './utils/unit-conversion.mjs';
import { frame } from '../../frameloop/frame.mjs';
const toResolve = new Set();
let isScheduled = false;
let anyNeedsMeasurement = false;
let isForced = false;
function measureAllKeyframes() {
if (anyNeedsMeasurement) {
const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
const transformsToRestore = new Map();
/**
* Write pass
* If we're measuring elements we want to remove bounding box-changing transforms.
*/
elementsToMeasure.forEach((element) => {
const removedTransforms = removeNonTranslationalTransform(element);
if (!removedTransforms.length)
return;
transformsToRestore.set(element, removedTransforms);
element.render();
});
// Read
resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
// Write
elementsToMeasure.forEach((element) => {
element.render();
const restore = transformsToRestore.get(element);
if (restore) {
restore.forEach(([key, value]) => {
element.getValue(key)?.set(value);
});
}
});
// Read
resolversToMeasure.forEach((resolver) => resolver.measureEndState());
// Write
resolversToMeasure.forEach((resolver) => {
if (resolver.suspendedScrollY !== undefined) {
window.scrollTo(0, resolver.suspendedScrollY);
}
});
}
anyNeedsMeasurement = false;
isScheduled = false;
toResolve.forEach((resolver) => resolver.complete(isForced));
toResolve.clear();
}
function readAllKeyframes() {
toResolve.forEach((resolver) => {
resolver.readKeyframes();
if (resolver.needsMeasurement) {
anyNeedsMeasurement = true;
}
});
}
function flushKeyframeResolvers() {
isForced = true;
readAllKeyframes();
measureAllKeyframes();
isForced = false;
}
class KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
this.state = "pending";
/**
* Track whether this resolver is async. If it is, it'll be added to the
* resolver queue and flushed in the next frame. Resolvers that aren't going
* to trigger read/write thrashing don't need to be async.
*/
this.isAsync = false;
/**
* Track whether this resolver needs to perform a measurement
* to resolve its keyframes.
*/
this.needsMeasurement = false;
this.unresolvedKeyframes = [...unresolvedKeyframes];
this.onComplete = onComplete;
this.name = name;
this.motionValue = motionValue;
this.element = element;
this.isAsync = isAsync;
}
scheduleResolve() {
this.state = "scheduled";
if (this.isAsync) {
toResolve.add(this);
if (!isScheduled) {
isScheduled = true;
frame.read(readAllKeyframes);
frame.resolveKeyframes(measureAllKeyframes);
}
}
else {
this.readKeyframes();
this.complete();
}
}
readKeyframes() {
const { unresolvedKeyframes, name, element, motionValue } = this;
// If initial keyframe is null we need to read it from the DOM
if (unresolvedKeyframes[0] === null) {
const currentValue = motionValue?.get();
// TODO: This doesn't work if the final keyframe is a wildcard
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (currentValue !== undefined) {
unresolvedKeyframes[0] = currentValue;
}
else if (element && name) {
const valueAsRead = element.readValue(name, finalKeyframe);
if (valueAsRead !== undefined && valueAsRead !== null) {
unresolvedKeyframes[0] = valueAsRead;
}
}
if (unresolvedKeyframes[0] === undefined) {
unresolvedKeyframes[0] = finalKeyframe;
}
if (motionValue && currentValue === undefined) {
motionValue.set(unresolvedKeyframes[0]);
}
}
fillWildcards(unresolvedKeyframes);
}
setFinalKeyframe() { }
measureInitialState() { }
renderEndStyles() { }
measureEndState() { }
complete(isForcedComplete = false) {
this.state = "complete";
this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForcedComplete);
toResolve.delete(this);
}
cancel() {
if (this.state === "scheduled") {
toResolve.delete(this);
this.state = "pending";
}
}
resume() {
if (this.state === "pending")
this.scheduleResolve();
}
}
export { KeyframeResolver, flushKeyframeResolvers };
//# sourceMappingURL=KeyframesResolver.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,12 @@
const isNotNull = (value) => value !== null;
function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
const resolvedKeyframes = keyframes.filter(isNotNull);
const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
return !index || finalKeyframe === undefined
? resolvedKeyframes[index]
: finalKeyframe;
}
export { getFinalKeyframe };
//# sourceMappingURL=get-final.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"get-final.mjs","sources":["../../../../src/animation/keyframes/get-final.ts"],"sourcesContent":["import { AnimationPlaybackOptions } from \"../types\"\n\nconst isNotNull = (value: unknown) => value !== null\n\nexport function getFinalKeyframe<T>(\n keyframes: T[],\n { repeat, repeatType = \"loop\" }: AnimationPlaybackOptions,\n finalKeyframe?: T,\n speed: number = 1\n): T {\n const resolvedKeyframes = keyframes.filter(isNotNull)\n const useFirstKeyframe =\n speed < 0 || (repeat && repeatType !== \"loop\" && repeat % 2 === 1)\n const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1\n\n return !index || finalKeyframe === undefined\n ? resolvedKeyframes[index]\n : finalKeyframe\n}\n"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,KAAc,KAAK,KAAK,KAAK,IAAI;SAEpC,gBAAgB,CAC5B,SAAc,EACd,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,EAA4B,EACzD,aAAiB,EACjB,QAAgB,CAAC,EAAA;IAEjB,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC;AACrD,IAAA,MAAM,gBAAgB,GAClB,KAAK,GAAG,CAAC,KAAK,MAAM,IAAI,UAAU,KAAK,MAAM,IAAI,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AACtE,IAAA,MAAM,KAAK,GAAG,gBAAgB,GAAG,CAAC,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC;AAEjE,IAAA,OAAO,CAAC,KAAK,IAAI,aAAa,KAAK;AAC/B,UAAE,iBAAiB,CAAC,KAAK;UACvB,aAAa;AACvB;;;;"}

View File

@@ -0,0 +1,10 @@
import { fillOffset } from './fill.mjs';
function defaultOffset(arr) {
const offset = [0];
fillOffset(offset, arr.length - 1);
return offset;
}
export { defaultOffset };
//# sourceMappingURL=default.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"default.mjs","sources":["../../../../../src/animation/keyframes/offsets/default.ts"],"sourcesContent":["import { fillOffset } from \"./fill\"\n\nexport function defaultOffset(arr: any[]): number[] {\n const offset = [0]\n fillOffset(offset, arr.length - 1)\n return offset\n}\n"],"names":[],"mappings":";;AAEM,SAAU,aAAa,CAAC,GAAU,EAAA;AACpC,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC;IAClB,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;AAClC,IAAA,OAAO,MAAM;AACjB;;;;"}

View File

@@ -0,0 +1,13 @@
import { progress } from 'motion-utils';
import { mixNumber } from '../../../utils/mix/number.mjs';
function fillOffset(offset, remaining) {
const min = offset[offset.length - 1];
for (let i = 1; i <= remaining; i++) {
const offsetProgress = progress(0, remaining, i);
offset.push(mixNumber(min, 1, offsetProgress));
}
}
export { fillOffset };
//# sourceMappingURL=fill.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"fill.mjs","sources":["../../../../../src/animation/keyframes/offsets/fill.ts"],"sourcesContent":["import { progress } from \"motion-utils\"\nimport { mixNumber } from \"../../../utils/mix/number\"\n\nexport function fillOffset(offset: number[], remaining: number): void {\n const min = offset[offset.length - 1]\n for (let i = 1; i <= remaining; i++) {\n const offsetProgress = progress(0, remaining, i)\n offset.push(mixNumber(min, 1, offsetProgress))\n }\n}\n"],"names":[],"mappings":";;;AAGM,SAAU,UAAU,CAAC,MAAgB,EAAE,SAAiB,EAAA;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;AACrC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC,EAAE,EAAE;QACjC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;AAChD,QAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,cAAc,CAAC,CAAC;IAClD;AACJ;;;;"}

View File

@@ -0,0 +1,6 @@
function convertOffsetToTimes(offset, duration) {
return offset.map((o) => o * duration);
}
export { convertOffsetToTimes };
//# sourceMappingURL=time.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"time.mjs","sources":["../../../../../src/animation/keyframes/offsets/time.ts"],"sourcesContent":["export function convertOffsetToTimes(offset: number[], duration: number) {\n return offset.map((o) => o * duration)\n}\n"],"names":[],"mappings":"AAAM,SAAU,oBAAoB,CAAC,MAAgB,EAAE,QAAgB,EAAA;AACnE,IAAA,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;AAC1C;;;;"}

View File

@@ -0,0 +1,12 @@
import { pxValues } from '../../waapi/utils/px-values.mjs';
function applyPxDefaults(keyframes, name) {
for (let i = 0; i < keyframes.length; i++) {
if (typeof keyframes[i] === "number" && pxValues.has(name)) {
keyframes[i] = keyframes[i] + "px";
}
}
}
export { applyPxDefaults };
//# sourceMappingURL=apply-px-defaults.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"apply-px-defaults.mjs","sources":["../../../../../src/animation/keyframes/utils/apply-px-defaults.ts"],"sourcesContent":["import { UnresolvedValueKeyframe, ValueKeyframe } from \"../../types\"\nimport { pxValues } from \"../../waapi/utils/px-values\"\n\nexport function applyPxDefaults(\n keyframes: ValueKeyframe[] | UnresolvedValueKeyframe[],\n name: string\n) {\n for (let i = 0; i < keyframes.length; i++) {\n if (typeof keyframes[i] === \"number\" && pxValues.has(name)) {\n keyframes[i] = keyframes[i] + \"px\"\n }\n }\n}\n"],"names":[],"mappings":";;AAGM,SAAU,eAAe,CAC3B,SAAsD,EACtD,IAAY,EAAA;AAEZ,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,QAAA,IAAI,OAAO,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACxD,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI;QACtC;IACJ;AACJ;;;;"}

View File

@@ -0,0 +1,8 @@
function fillWildcards(keyframes) {
for (let i = 1; i < keyframes.length; i++) {
keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
}
}
export { fillWildcards };
//# sourceMappingURL=fill-wildcards.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"fill-wildcards.mjs","sources":["../../../../../src/animation/keyframes/utils/fill-wildcards.ts"],"sourcesContent":["import { UnresolvedValueKeyframe, ValueKeyframe } from \"../../types\"\n\nexport function fillWildcards(\n keyframes: ValueKeyframe[] | UnresolvedValueKeyframe[]\n) {\n for (let i = 1; i < keyframes.length; i++) {\n keyframes[i] ??= keyframes[i - 1]\n }\n}\n"],"names":[],"mappings":"AAEM,SAAU,aAAa,CACzB,SAAsD,EAAA;AAEtD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,QAAA,SAAS,CAAC,CAAC,CAAA,KAAX,SAAS,CAAC,CAAC,CAAA,GAAM,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACrC;AACJ;;;;"}

View File

@@ -0,0 +1,16 @@
import { isZeroValueString } from 'motion-utils';
function isNone(value) {
if (typeof value === "number") {
return value === 0;
}
else if (value !== null) {
return value === "none" || value === "0" || isZeroValueString(value);
}
else {
return true;
}
}
export { isNone };
//# sourceMappingURL=is-none.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-none.mjs","sources":["../../../../../src/animation/keyframes/utils/is-none.ts"],"sourcesContent":["import { isZeroValueString } from \"motion-utils\"\nimport { AnyResolvedKeyframe } from \"../../types\"\n\nexport function isNone(value: AnyResolvedKeyframe | null) {\n if (typeof value === \"number\") {\n return value === 0\n } else if (value !== null) {\n return value === \"none\" || value === \"0\" || isZeroValueString(value)\n } else {\n return true\n }\n}\n"],"names":[],"mappings":";;AAGM,SAAU,MAAM,CAAC,KAAiC,EAAA;AACpD,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,OAAO,KAAK,KAAK,CAAC;IACtB;AAAO,SAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AACvB,QAAA,OAAO,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC;IACxE;SAAO;AACH,QAAA,OAAO,IAAI;IACf;AACJ;;;;"}

View File

@@ -0,0 +1,31 @@
import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
import { getAnimatableNone } from '../../../value/types/utils/animatable-none.mjs';
/**
* If we encounter keyframes like "none" or "0" and we also have keyframes like
* "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
* the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
* zero equivalents, i.e. "#fff0" or "0px 0px".
*/
const invalidTemplates = new Set(["auto", "none", "0"]);
function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
let i = 0;
let animatableTemplate = undefined;
while (i < unresolvedKeyframes.length && !animatableTemplate) {
const keyframe = unresolvedKeyframes[i];
if (typeof keyframe === "string" &&
!invalidTemplates.has(keyframe) &&
analyseComplexValue(keyframe).values.length) {
animatableTemplate = unresolvedKeyframes[i];
}
i++;
}
if (animatableTemplate && name) {
for (const noneIndex of noneKeyframeIndexes) {
unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
}
}
}
export { makeNoneKeyframesAnimatable };
//# sourceMappingURL=make-none-animatable.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"make-none-animatable.mjs","sources":["../../../../../src/animation/keyframes/utils/make-none-animatable.ts"],"sourcesContent":["import { analyseComplexValue } from \"../../../value/types/complex\"\nimport { getAnimatableNone } from \"../../../value/types/utils/animatable-none\"\nimport { AnyResolvedKeyframe } from \"../../types\"\nimport { UnresolvedKeyframes } from \"../KeyframesResolver\"\n\n/**\n * If we encounter keyframes like \"none\" or \"0\" and we also have keyframes like\n * \"#fff\" or \"200px 200px\" we want to find a keyframe to serve as a template for\n * the \"none\" keyframes. In this case \"#fff\" or \"200px 200px\" - then these get turned into\n * zero equivalents, i.e. \"#fff0\" or \"0px 0px\".\n */\nconst invalidTemplates = new Set([\"auto\", \"none\", \"0\"])\n\nexport function makeNoneKeyframesAnimatable(\n unresolvedKeyframes: UnresolvedKeyframes<AnyResolvedKeyframe>,\n noneKeyframeIndexes: number[],\n name?: string\n) {\n let i = 0\n let animatableTemplate: string | undefined = undefined\n while (i < unresolvedKeyframes.length && !animatableTemplate) {\n const keyframe = unresolvedKeyframes[i]\n if (\n typeof keyframe === \"string\" &&\n !invalidTemplates.has(keyframe) &&\n analyseComplexValue(keyframe).values.length\n ) {\n animatableTemplate = unresolvedKeyframes[i] as string\n }\n i++\n }\n\n if (animatableTemplate && name) {\n for (const noneIndex of noneKeyframeIndexes) {\n unresolvedKeyframes[noneIndex] = getAnimatableNone(\n name,\n animatableTemplate\n )\n }\n }\n}\n"],"names":[],"mappings":";;;AAKA;;;;;AAKG;AACH,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;SAEvC,2BAA2B,CACvC,mBAA6D,EAC7D,mBAA6B,EAC7B,IAAa,EAAA;IAEb,IAAI,CAAC,GAAG,CAAC;IACT,IAAI,kBAAkB,GAAuB,SAAS;IACtD,OAAO,CAAC,GAAG,mBAAmB,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE;AAC1D,QAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,CAAC,CAAC;QACvC,IACI,OAAO,QAAQ,KAAK,QAAQ;AAC5B,YAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAC;YAC/B,mBAAmB,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,MAAM,EAC7C;AACE,YAAA,kBAAkB,GAAG,mBAAmB,CAAC,CAAC,CAAW;QACzD;AACA,QAAA,CAAC,EAAE;IACP;AAEA,IAAA,IAAI,kBAAkB,IAAI,IAAI,EAAE;AAC5B,QAAA,KAAK,MAAM,SAAS,IAAI,mBAAmB,EAAE;YACzC,mBAAmB,CAAC,SAAS,CAAC,GAAG,iBAAiB,CAC9C,IAAI,EACJ,kBAAkB,CACrB;QACL;IACJ;AACJ;;;;"}

View File

@@ -0,0 +1,47 @@
import { parseValueFromTransform } from '../../../render/dom/parse-transform.mjs';
import { transformPropOrder } from '../../../render/utils/keys-transform.mjs';
import { number } from '../../../value/types/numbers/index.mjs';
import { px } from '../../../value/types/numbers/units.mjs';
const isNumOrPxType = (v) => v === number || v === px;
const transformKeys = new Set(["x", "y", "z"]);
const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
function removeNonTranslationalTransform(visualElement) {
const removedTransforms = [];
nonTranslationalTransformKeys.forEach((key) => {
const value = visualElement.getValue(key);
if (value !== undefined) {
removedTransforms.push([key, value.get()]);
value.set(key.startsWith("scale") ? 1 : 0);
}
});
return removedTransforms;
}
const positionalValues = {
// Dimensions
width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => {
const width = x.max - x.min;
return boxSizing === "border-box"
? width
: width - parseFloat(paddingLeft) - parseFloat(paddingRight);
},
height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => {
const height = y.max - y.min;
return boxSizing === "border-box"
? height
: height - parseFloat(paddingTop) - parseFloat(paddingBottom);
},
top: (_bbox, { top }) => parseFloat(top),
left: (_bbox, { left }) => parseFloat(left),
bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
// Transform
x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
};
// Alias translate longform names
positionalValues.translateX = positionalValues.x;
positionalValues.translateY = positionalValues.y;
export { isNumOrPxType, positionalValues, removeNonTranslationalTransform };
//# sourceMappingURL=unit-conversion.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"unit-conversion.mjs","sources":["../../../../../src/animation/keyframes/utils/unit-conversion.ts"],"sourcesContent":["import type { Box } from \"motion-utils\"\nimport { parseValueFromTransform } from \"../../../render/dom/parse-transform\"\nimport { transformPropOrder } from \"../../../render/utils/keys-transform\"\nimport { MotionValue } from \"../../../value\"\nimport { number } from \"../../../value/types/numbers\"\nimport { px } from \"../../../value/types/numbers/units\"\nimport { ValueType } from \"../../../value/types/types\"\nimport { AnyResolvedKeyframe } from \"../../types\"\nimport { WithRender } from \"../types\"\n\nexport const isNumOrPxType = (v?: ValueType): v is ValueType =>\n v === number || v === px\n\ntype GetActualMeasurementInPixels = (\n bbox: Box,\n computedStyle: Partial<CSSStyleDeclaration>\n) => number\n\nconst transformKeys = new Set([\"x\", \"y\", \"z\"])\nconst nonTranslationalTransformKeys = transformPropOrder.filter(\n (key) => !transformKeys.has(key)\n)\n\ntype RemovedTransforms = [string, AnyResolvedKeyframe][]\nexport function removeNonTranslationalTransform(visualElement: WithRender) {\n const removedTransforms: RemovedTransforms = []\n\n nonTranslationalTransformKeys.forEach((key) => {\n const value: MotionValue<AnyResolvedKeyframe> | undefined =\n visualElement.getValue(key)\n if (value !== undefined) {\n removedTransforms.push([key, value.get()])\n value.set(key.startsWith(\"scale\") ? 1 : 0)\n }\n })\n\n return removedTransforms\n}\n\nexport const positionalValues: { [key: string]: GetActualMeasurementInPixels } =\n {\n // Dimensions\n width: (\n { x },\n { paddingLeft = \"0\", paddingRight = \"0\", boxSizing }\n ) => {\n const width = x.max - x.min\n return boxSizing === \"border-box\"\n ? width\n : width - parseFloat(paddingLeft) - parseFloat(paddingRight)\n },\n height: (\n { y },\n { paddingTop = \"0\", paddingBottom = \"0\", boxSizing }\n ) => {\n const height = y.max - y.min\n return boxSizing === \"border-box\"\n ? height\n : height - parseFloat(paddingTop) - parseFloat(paddingBottom)\n },\n\n top: (_bbox, { top }) => parseFloat(top as string),\n left: (_bbox, { left }) => parseFloat(left as string),\n bottom: ({ y }, { top }) => parseFloat(top as string) + (y.max - y.min),\n right: ({ x }, { left }) =>\n parseFloat(left as string) + (x.max - x.min),\n\n // Transform\n x: (_bbox, { transform }) => parseValueFromTransform(transform, \"x\"),\n y: (_bbox, { transform }) => parseValueFromTransform(transform, \"y\"),\n }\n\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x\npositionalValues.translateY = positionalValues.y\n"],"names":[],"mappings":";;;;;AAUO,MAAM,aAAa,GAAG,CAAC,CAAa,KACvC,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK;AAO1B,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAC9C,MAAM,6BAA6B,GAAG,kBAAkB,CAAC,MAAM,CAC3D,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CACnC;AAGK,SAAU,+BAA+B,CAAC,aAAyB,EAAA;IACrE,MAAM,iBAAiB,GAAsB,EAAE;AAE/C,IAAA,6BAA6B,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;QAC1C,MAAM,KAAK,GACP,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC/B,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACrB,YAAA,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;AAC1C,YAAA,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC9C;AACJ,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,iBAAiB;AAC5B;AAEO,MAAM,gBAAgB,GACzB;;AAEI,IAAA,KAAK,EAAE,CACH,EAAE,CAAC,EAAE,EACL,EAAE,WAAW,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,EAAE,SAAS,EAAE,KACpD;QACA,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG;QAC3B,OAAO,SAAS,KAAK;AACjB,cAAE;AACF,cAAE,KAAK,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC;IACpE,CAAC;AACD,IAAA,MAAM,EAAE,CACJ,EAAE,CAAC,EAAE,EACL,EAAE,UAAU,GAAG,GAAG,EAAE,aAAa,GAAG,GAAG,EAAE,SAAS,EAAE,KACpD;QACA,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG;QAC5B,OAAO,SAAS,KAAK;AACjB,cAAE;AACF,cAAE,MAAM,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,aAAa,CAAC;IACrE,CAAC;AAED,IAAA,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,UAAU,CAAC,GAAa,CAAC;AAClD,IAAA,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,UAAU,CAAC,IAAc,CAAC;IACrD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,UAAU,CAAC,GAAa,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;IACvE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KACnB,UAAU,CAAC,IAAc,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;;AAGhD,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,uBAAuB,CAAC,SAAS,EAAE,GAAG,CAAC;AACpE,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,uBAAuB,CAAC,SAAS,EAAE,GAAG,CAAC;;AAG5E;AACA,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAChD,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,CAAC;;;;"}

View File

@@ -0,0 +1,7 @@
import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
const optimizedAppearDataId = "framerAppearId";
const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
export { optimizedAppearDataAttribute, optimizedAppearDataId };
//# sourceMappingURL=data-id.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"data-id.mjs","sources":["../../../../src/animation/optimized-appear/data-id.ts"],"sourcesContent":["import { camelToDash } from \"../../render/dom/utils/camel-to-dash\"\n\nexport const optimizedAppearDataId = \"framerAppearId\"\n\nexport const optimizedAppearDataAttribute =\n \"data-\" + camelToDash(optimizedAppearDataId) as \"data-framer-appear-id\"\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG;AAE9B,MAAM,4BAA4B,GACrC,OAAO,GAAG,WAAW,CAAC,qBAAqB;;;;"}

View File

@@ -0,0 +1,8 @@
import { optimizedAppearDataAttribute } from './data-id.mjs';
function getOptimisedAppearId(visualElement) {
return visualElement.props[optimizedAppearDataAttribute];
}
export { getOptimisedAppearId };
//# sourceMappingURL=get-appear-id.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"get-appear-id.mjs","sources":["../../../../src/animation/optimized-appear/get-appear-id.ts"],"sourcesContent":["import { optimizedAppearDataAttribute } from \"./data-id\"\nimport type { WithAppearProps } from \"./types\"\n\nexport function getOptimisedAppearId(\n visualElement: WithAppearProps\n): string | undefined {\n return visualElement.props[optimizedAppearDataAttribute]\n}\n"],"names":[],"mappings":";;AAGM,SAAU,oBAAoB,CAChC,aAA8B,EAAA;AAE9B,IAAA,OAAO,aAAa,CAAC,KAAK,CAAC,4BAA4B,CAAC;AAC5D;;;;"}

View File

@@ -0,0 +1,27 @@
class WithPromise {
constructor() {
this.updateFinished();
}
get finished() {
return this._finished;
}
updateFinished() {
this._finished = new Promise((resolve) => {
this.resolve = resolve;
});
}
notifyFinished() {
this.resolve();
}
/**
* Allows the animation to be awaited.
*
* @deprecated Use `finished` instead.
*/
then(onResolve, onReject) {
return this.finished.then(onResolve, onReject);
}
}
export { WithPromise };
//# sourceMappingURL=WithPromise.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"WithPromise.mjs","sources":["../../../../src/animation/utils/WithPromise.ts"],"sourcesContent":["export class WithPromise {\n protected _finished: Promise<void>\n\n resolve: VoidFunction\n\n constructor() {\n this.updateFinished()\n }\n\n get finished() {\n return this._finished\n }\n\n protected updateFinished() {\n this._finished = new Promise<void>((resolve) => {\n this.resolve = resolve\n })\n }\n\n protected notifyFinished() {\n this.resolve()\n }\n\n /**\n * Allows the animation to be awaited.\n *\n * @deprecated Use `finished` instead.\n */\n then(onResolve: VoidFunction, onReject?: VoidFunction) {\n return this.finished.then(onResolve, onReject)\n }\n}\n"],"names":[],"mappings":"MAAa,WAAW,CAAA;AAKpB,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,EAAE;IACzB;AAEA,IAAA,IAAI,QAAQ,GAAA;QACR,OAAO,IAAI,CAAC,SAAS;IACzB;IAEU,cAAc,GAAA;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,KAAI;AAC3C,YAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AAC1B,QAAA,CAAC,CAAC;IACN;IAEU,cAAc,GAAA;QACpB,IAAI,CAAC,OAAO,EAAE;IAClB;AAEA;;;;AAIG;IACH,IAAI,CAAC,SAAuB,EAAE,QAAuB,EAAA;QACjD,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC;IAClD;AACH;;;;"}

View File

@@ -0,0 +1,13 @@
const animationMaps = new WeakMap();
const animationMapKey = (name, pseudoElement = "") => `${name}:${pseudoElement}`;
function getAnimationMap(element) {
let map = animationMaps.get(element);
if (!map) {
map = new Map();
animationMaps.set(element, map);
}
return map;
}
export { animationMapKey, getAnimationMap };
//# sourceMappingURL=active-animations.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"active-animations.mjs","sources":["../../../../src/animation/utils/active-animations.ts"],"sourcesContent":["import { NativeAnimation } from \"../NativeAnimation\"\nimport { AnyResolvedKeyframe } from \"../types\"\n\nconst animationMaps = new WeakMap<\n Element,\n Map<string, NativeAnimation<AnyResolvedKeyframe>>\n>()\nexport const animationMapKey = (name: string, pseudoElement: string = \"\") =>\n `${name}:${pseudoElement}`\n\nexport function getAnimationMap(element: Element) {\n let map = animationMaps.get(element)\n if (!map) {\n map = new Map()\n animationMaps.set(element, map)\n }\n return map\n}\n"],"names":[],"mappings":"AAGA,MAAM,aAAa,GAAG,IAAI,OAAO,EAG9B;AACI,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,aAAA,GAAwB,EAAE,KACpE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,aAAa;AAEtB,SAAU,eAAe,CAAC,OAAgB,EAAA;IAC5C,IAAI,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;IACpC,IAAI,CAAC,GAAG,EAAE;AACN,QAAA,GAAG,GAAG,IAAI,GAAG,EAAE;AACf,QAAA,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;IACnC;AACA,IAAA,OAAO,GAAG;AACd;;;;"}

View File

@@ -0,0 +1,16 @@
function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
const index = Array.from(children)
.sort((a, b) => a.sortNodePosition(b))
.indexOf(child);
const numChildren = children.size;
const maxStaggerDuration = (numChildren - 1) * staggerChildren;
const delayIsFunction = typeof delayChildren === "function";
return delayIsFunction
? delayChildren(index, numChildren)
: staggerDirection === 1
? index * staggerChildren
: maxStaggerDuration - index * staggerChildren;
}
export { calcChildStagger };
//# sourceMappingURL=calc-child-stagger.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"calc-child-stagger.mjs","sources":["../../../../src/animation/utils/calc-child-stagger.ts"],"sourcesContent":["import type { DynamicOption } from \"../types\"\nimport type { VisualElement } from \"../../render/VisualElement\"\n\nexport function calcChildStagger(\n children: Set<VisualElement>,\n child: VisualElement,\n delayChildren?: number | DynamicOption<number>,\n staggerChildren: number = 0,\n staggerDirection: number = 1\n): number {\n const index = Array.from(children)\n .sort((a, b) => a.sortNodePosition(b))\n .indexOf(child)\n const numChildren = children.size\n const maxStaggerDuration = (numChildren - 1) * staggerChildren\n const delayIsFunction = typeof delayChildren === \"function\"\n\n return delayIsFunction\n ? delayChildren(index, numChildren)\n : staggerDirection === 1\n ? index * staggerChildren\n : maxStaggerDuration - index * staggerChildren\n}\n"],"names":[],"mappings":"AAGM,SAAU,gBAAgB,CAC5B,QAA4B,EAC5B,KAAoB,EACpB,aAA8C,EAC9C,eAAA,GAA0B,CAAC,EAC3B,mBAA2B,CAAC,EAAA;AAE5B,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ;AAC5B,SAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;SACpC,OAAO,CAAC,KAAK,CAAC;AACnB,IAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI;IACjC,MAAM,kBAAkB,GAAG,CAAC,WAAW,GAAG,CAAC,IAAI,eAAe;AAC9D,IAAA,MAAM,eAAe,GAAG,OAAO,aAAa,KAAK,UAAU;AAE3D,IAAA,OAAO;AACH,UAAE,aAAa,CAAC,KAAK,EAAE,WAAW;UAChC,gBAAgB,KAAK;cACrB,KAAK,GAAG;AACV,cAAE,kBAAkB,GAAG,KAAK,GAAG,eAAe;AACtD;;;;"}

View File

@@ -0,0 +1,44 @@
import { warning } from 'motion-utils';
import { isGenerator } from '../generators/utils/is-generator.mjs';
import { isAnimatable } from './is-animatable.mjs';
function hasKeyframesChanged(keyframes) {
const current = keyframes[0];
if (keyframes.length === 1)
return true;
for (let i = 0; i < keyframes.length; i++) {
if (keyframes[i] !== current)
return true;
}
}
function canAnimate(keyframes, name, type, velocity) {
/**
* Check if we're able to animate between the start and end keyframes,
* and throw a warning if we're attempting to animate between one that's
* animatable and another that isn't.
*/
const originKeyframe = keyframes[0];
if (originKeyframe === null) {
return false;
}
/**
* These aren't traditionally animatable but we do support them.
* In future we could look into making this more generic or replacing
* this function with mix() === mixImmediate
*/
if (name === "display" || name === "visibility")
return true;
const targetKeyframe = keyframes[keyframes.length - 1];
const isOriginAnimatable = isAnimatable(originKeyframe, name);
const isTargetAnimatable = isAnimatable(targetKeyframe, name);
warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
// Always skip if any of these are true
if (!isOriginAnimatable || !isTargetAnimatable) {
return false;
}
return (hasKeyframesChanged(keyframes) ||
((type === "spring" || isGenerator(type)) && velocity));
}
export { canAnimate };
//# sourceMappingURL=can-animate.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"can-animate.mjs","sources":["../../../../src/animation/utils/can-animate.ts"],"sourcesContent":["import { warning } from \"motion-utils\"\nimport { isGenerator } from \"../generators/utils/is-generator\"\nimport { ResolvedKeyframes } from \"../keyframes/KeyframesResolver\"\nimport { AnimationGeneratorType } from \"../types\"\nimport { isAnimatable } from \"./is-animatable\"\n\nfunction hasKeyframesChanged(keyframes: ResolvedKeyframes<any>) {\n const current = keyframes[0]\n if (keyframes.length === 1) return true\n for (let i = 0; i < keyframes.length; i++) {\n if (keyframes[i] !== current) return true\n }\n}\n\nexport function canAnimate(\n keyframes: ResolvedKeyframes<any>,\n name?: string,\n type?: AnimationGeneratorType,\n velocity?: number\n) {\n /**\n * Check if we're able to animate between the start and end keyframes,\n * and throw a warning if we're attempting to animate between one that's\n * animatable and another that isn't.\n */\n const originKeyframe = keyframes[0]\n if (originKeyframe === null) {\n return false\n }\n\n /**\n * These aren't traditionally animatable but we do support them.\n * In future we could look into making this more generic or replacing\n * this function with mix() === mixImmediate\n */\n if (name === \"display\" || name === \"visibility\") return true\n\n const targetKeyframe = keyframes[keyframes.length - 1]\n const isOriginAnimatable = isAnimatable(originKeyframe, name)\n const isTargetAnimatable = isAnimatable(targetKeyframe, name)\n\n warning(\n isOriginAnimatable === isTargetAnimatable,\n `You are trying to animate ${name} from \"${originKeyframe}\" to \"${targetKeyframe}\". \"${\n isOriginAnimatable ? targetKeyframe : originKeyframe\n }\" is not an animatable value.`,\n \"value-not-animatable\"\n )\n\n // Always skip if any of these are true\n if (!isOriginAnimatable || !isTargetAnimatable) {\n return false\n }\n\n return (\n hasKeyframesChanged(keyframes) ||\n ((type === \"spring\" || isGenerator(type)) && velocity)\n )\n}\n"],"names":[],"mappings":";;;;AAMA,SAAS,mBAAmB,CAAC,SAAiC,EAAA;AAC1D,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC;AAC5B,IAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,QAAA,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,OAAO;AAAE,YAAA,OAAO,IAAI;IAC7C;AACJ;AAEM,SAAU,UAAU,CACtB,SAAiC,EACjC,IAAa,EACb,IAA6B,EAC7B,QAAiB,EAAA;AAEjB;;;;AAIG;AACH,IAAA,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;AACnC,IAAA,IAAI,cAAc,KAAK,IAAI,EAAE;AACzB,QAAA,OAAO,KAAK;IAChB;AAEA;;;;AAIG;AACH,IAAA,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,YAAY;AAAE,QAAA,OAAO,IAAI;IAE5D,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC;IAC7D,MAAM,kBAAkB,GAAG,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC;IAE7D,OAAO,CACH,kBAAkB,KAAK,kBAAkB,EACzC,6BAA6B,IAAI,CAAA,OAAA,EAAU,cAAc,CAAA,MAAA,EAAS,cAAc,CAAA,IAAA,EAC5E,kBAAkB,GAAG,cAAc,GAAG,cAC1C,CAAA,6BAAA,CAA+B,EAC/B,sBAAsB,CACzB;;AAGD,IAAA,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE;AAC5C,QAAA,OAAO,KAAK;IAChB;AAEA,IAAA,QACI,mBAAmB,CAAC,SAAS,CAAC;AAC9B,SAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC;AAE9D;;;;"}

View File

@@ -0,0 +1,42 @@
import { invariant, isNumericalString } from 'motion-utils';
import { isCSSVariableToken } from './is-css-variable.mjs';
/**
* Parse Framer's special CSS variable format into a CSS token and a fallback.
*
* ```
* `var(--foo, #fff)` => [`--foo`, '#fff']
* ```
*
* @param current
*/
const splitCSSVariableRegex =
// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
function parseCSSVariable(current) {
const match = splitCSSVariableRegex.exec(current);
if (!match)
return [,];
const [, token1, token2, fallback] = match;
return [`--${token1 ?? token2}`, fallback];
}
const maxDepth = 4;
function getVariableValue(current, element, depth = 1) {
invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
const [token, fallback] = parseCSSVariable(current);
// No CSS variable detected
if (!token)
return;
// Attempt to read this CSS variable off the element
const resolved = window.getComputedStyle(element).getPropertyValue(token);
if (resolved) {
const trimmed = resolved.trim();
return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
}
return isCSSVariableToken(fallback)
? getVariableValue(fallback, element, depth + 1)
: fallback;
}
export { getVariableValue, parseCSSVariable };
//# sourceMappingURL=css-variables-conversion.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css-variables-conversion.mjs","sources":["../../../../src/animation/utils/css-variables-conversion.ts"],"sourcesContent":["import { invariant, isNumericalString } from \"motion-utils\"\nimport { AnyResolvedKeyframe } from \"../types\"\nimport { CSSVariableToken, isCSSVariableToken } from \"./is-css-variable\"\n\n/**\n * Parse Framer's special CSS variable format into a CSS token and a fallback.\n *\n * ```\n * `var(--foo, #fff)` => [`--foo`, '#fff']\n * ```\n *\n * @param current\n */\n\nconst splitCSSVariableRegex =\n // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words\n /^var\\(--(?:([\\w-]+)|([\\w-]+), ?([a-zA-Z\\d ()%#.,-]+))\\)/u\nexport function parseCSSVariable(current: string) {\n const match = splitCSSVariableRegex.exec(current)\n if (!match) return [,]\n\n const [, token1, token2, fallback] = match\n return [`--${token1 ?? token2}`, fallback]\n}\n\nconst maxDepth = 4\nexport function getVariableValue(\n current: CSSVariableToken,\n element: Element,\n depth = 1\n): AnyResolvedKeyframe | undefined {\n invariant(\n depth <= maxDepth,\n `Max CSS variable fallback depth detected in property \"${current}\". This may indicate a circular fallback dependency.`,\n \"max-css-var-depth\"\n )\n\n const [token, fallback] = parseCSSVariable(current)\n\n // No CSS variable detected\n if (!token) return\n\n // Attempt to read this CSS variable off the element\n const resolved = window.getComputedStyle(element).getPropertyValue(token)\n\n if (resolved) {\n const trimmed = resolved.trim()\n return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed\n }\n\n return isCSSVariableToken(fallback)\n ? getVariableValue(fallback, element, depth + 1)\n : fallback\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;AAQG;AAEH,MAAM,qBAAqB;AACvB;AACA,0DAA0D;AACxD,SAAU,gBAAgB,CAAC,OAAe,EAAA;IAC5C,MAAM,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;AACjD,IAAA,IAAI,CAAC,KAAK;QAAE,OAAO,GAAG;IAEtB,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,KAAK;IAC1C,OAAO,CAAC,KAAK,MAAM,IAAI,MAAM,CAAA,CAAE,EAAE,QAAQ,CAAC;AAC9C;AAEA,MAAM,QAAQ,GAAG,CAAC;AACZ,SAAU,gBAAgB,CAC5B,OAAyB,EACzB,OAAgB,EAChB,KAAK,GAAG,CAAC,EAAA;IAET,SAAS,CACL,KAAK,IAAI,QAAQ,EACjB,CAAA,sDAAA,EAAyD,OAAO,CAAA,oDAAA,CAAsD,EACtH,mBAAmB,CACtB;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC;;AAGnD,IAAA,IAAI,CAAC,KAAK;QAAE;;AAGZ,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAEzE,IAAI,QAAQ,EAAE;AACV,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE;AAC/B,QAAA,OAAO,iBAAiB,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,OAAO;IACrE;IAEA,OAAO,kBAAkB,CAAC,QAAQ;UAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC;UAC7C,QAAQ;AAClB;;;;"}

View File

@@ -0,0 +1,41 @@
import { transformProps } from '../../render/utils/keys-transform.mjs';
const underDampedSpring = {
type: "spring",
stiffness: 500,
damping: 25,
restSpeed: 10,
};
const criticallyDampedSpring = (target) => ({
type: "spring",
stiffness: 550,
damping: target === 0 ? 2 * Math.sqrt(550) : 30,
restSpeed: 10,
});
const keyframesTransition = {
type: "keyframes",
duration: 0.8,
};
/**
* Default easing curve is a slightly shallower version of
* the default browser easing curve.
*/
const ease = {
type: "keyframes",
ease: [0.25, 0.1, 0.35, 1],
duration: 0.3,
};
const getDefaultTransition = (valueKey, { keyframes }) => {
if (keyframes.length > 2) {
return keyframesTransition;
}
else if (transformProps.has(valueKey)) {
return valueKey.startsWith("scale")
? criticallyDampedSpring(keyframes[1])
: underDampedSpring;
}
return ease;
};
export { getDefaultTransition };
//# sourceMappingURL=default-transitions.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"default-transitions.mjs","sources":["../../../../src/animation/utils/default-transitions.ts"],"sourcesContent":["import { transformProps } from \"../../render/utils/keys-transform\"\nimport type { ValueAnimationOptions } from \"../types\"\n\nconst underDampedSpring: Partial<ValueAnimationOptions> = {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n}\n\nconst criticallyDampedSpring = (\n target: unknown\n): Partial<ValueAnimationOptions> => ({\n type: \"spring\",\n stiffness: 550,\n damping: target === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n})\n\nconst keyframesTransition: Partial<ValueAnimationOptions> = {\n type: \"keyframes\",\n duration: 0.8,\n}\n\n/**\n * Default easing curve is a slightly shallower version of\n * the default browser easing curve.\n */\nconst ease: Partial<ValueAnimationOptions> = {\n type: \"keyframes\",\n ease: [0.25, 0.1, 0.35, 1],\n duration: 0.3,\n}\n\nexport const getDefaultTransition = (\n valueKey: string,\n { keyframes }: ValueAnimationOptions\n): Partial<ValueAnimationOptions> => {\n if (keyframes.length > 2) {\n return keyframesTransition\n } else if (transformProps.has(valueKey)) {\n return valueKey.startsWith(\"scale\")\n ? criticallyDampedSpring(keyframes[1])\n : underDampedSpring\n }\n\n return ease\n}\n"],"names":[],"mappings":";;AAGA,MAAM,iBAAiB,GAAmC;AACtD,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE,EAAE;CAChB;AAED,MAAM,sBAAsB,GAAG,CAC3B,MAAe,MACmB;AAClC,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE;AAC/C,IAAA,SAAS,EAAE,EAAE;AAChB,CAAA,CAAC;AAEF,MAAM,mBAAmB,GAAmC;AACxD,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,QAAQ,EAAE,GAAG;CAChB;AAED;;;AAGG;AACH,MAAM,IAAI,GAAmC;AACzC,IAAA,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AAC1B,IAAA,QAAQ,EAAE,GAAG;CAChB;AAEM,MAAM,oBAAoB,GAAG,CAChC,QAAgB,EAChB,EAAE,SAAS,EAAyB,KACJ;AAChC,IAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,QAAA,OAAO,mBAAmB;IAC9B;AAAO,SAAA,IAAI,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AACrC,QAAA,OAAO,QAAQ,CAAC,UAAU,CAAC,OAAO;AAC9B,cAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC,CAAC;cACnC,iBAAiB;IAC3B;AAEA,IAAA,OAAO,IAAI;AACf;;;;"}

View File

@@ -0,0 +1,14 @@
import { resolveTransition } from './resolve-transition.mjs';
function getValueTransition(transition, key) {
const valueTransition = transition?.[key] ??
transition?.["default"] ??
transition;
if (valueTransition !== transition) {
return resolveTransition(valueTransition, transition);
}
return valueTransition;
}
export { getValueTransition };
//# sourceMappingURL=get-value-transition.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"get-value-transition.mjs","sources":["../../../../src/animation/utils/get-value-transition.ts"],"sourcesContent":["import { resolveTransition } from \"./resolve-transition\"\n\nexport function getValueTransition(transition: any, key: string) {\n const valueTransition =\n transition?.[key as keyof typeof transition] ??\n transition?.[\"default\"] ??\n transition\n\n if (valueTransition !== transition) {\n return resolveTransition(valueTransition, transition)\n }\n\n return valueTransition\n}\n"],"names":[],"mappings":";;AAEM,SAAU,kBAAkB,CAAC,UAAe,EAAE,GAAW,EAAA;AAC3D,IAAA,MAAM,eAAe,GACjB,UAAU,GAAG,GAA8B,CAAC;QAC5C,UAAU,GAAG,SAAS,CAAC;AACvB,QAAA,UAAU;AAEd,IAAA,IAAI,eAAe,KAAK,UAAU,EAAE;AAChC,QAAA,OAAO,iBAAiB,CAAC,eAAe,EAAE,UAAU,CAAC;IACzD;AAEA,IAAA,OAAO,eAAe;AAC1B;;;;"}

View File

@@ -0,0 +1,31 @@
import { complex } from '../../value/types/complex/index.mjs';
/**
* Check if a value is animatable. Examples:
*
* ✅: 100, "100px", "#fff"
* ❌: "block", "url(2.jpg)"
* @param value
*
* @internal
*/
const isAnimatable = (value, name) => {
// If the list of keys that might be non-animatable grows, replace with Set
if (name === "zIndex")
return false;
// If it's a number or a keyframes array, we can animate it. We might at some point
// need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
// but for now lets leave it like this for performance reasons
if (typeof value === "number" || Array.isArray(value))
return true;
if (typeof value === "string" && // It's animatable if we have a string
(complex.test(value) || value === "0") && // And it contains numbers and/or colors
!value.startsWith("url(") // Unless it starts with "url("
) {
return true;
}
return false;
};
export { isAnimatable };
//# sourceMappingURL=is-animatable.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-animatable.mjs","sources":["../../../../src/animation/utils/is-animatable.ts"],"sourcesContent":["import { complex } from \"../../value/types/complex\"\nimport { ValueKeyframesDefinition } from \"../types\"\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ✅: 100, \"100px\", \"#fff\"\n * ❌: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nexport const isAnimatable = (\n value: ValueKeyframesDefinition,\n name?: string\n) => {\n // If the list of keys that might be non-animatable grows, replace with Set\n if (name === \"zIndex\") return false\n\n // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n if (typeof value === \"number\" || Array.isArray(value)) return true\n\n if (\n typeof value === \"string\" && // It's animatable if we have a string\n (complex.test(value) || value === \"0\") && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true\n }\n\n return false\n}\n"],"names":[],"mappings":";;AAGA;;;;;;;;AAQG;MACU,YAAY,GAAG,CACxB,KAA+B,EAC/B,IAAa,KACb;;IAEA,IAAI,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;;;;IAKnC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;AAElE,IAAA,IACI,OAAO,KAAK,KAAK,QAAQ;AACzB,SAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,CAAC;AACtC,QAAA,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;MAC3B;AACE,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,OAAO,KAAK;AAChB;;;;"}

View File

@@ -0,0 +1,27 @@
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName =
/*@__PURE__*/ checkStringStartsWith("--");
const startsAsVariableToken =
/*@__PURE__*/ checkStringStartsWith("var(--");
const isCSSVariableToken = (value) => {
const startsWithToken = startsAsVariableToken(value);
if (!startsWithToken)
return false;
// Ensure any comments are stripped from the value as this can harm performance of the regex.
return singleCssVariableRegex.test(value.split("/*")[0].trim());
};
const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
/**
* Check if a value contains a CSS variable anywhere (e.g. inside calc()).
* Unlike isCSSVariableToken which checks if the value IS a var() token,
* this checks if the value CONTAINS var() somewhere in the string.
*/
function containsCSSVariable(value) {
if (typeof value !== "string")
return false;
// Strip comments to avoid false positives
return value.split("/*")[0].includes("var(--");
}
export { containsCSSVariable, isCSSVariableName, isCSSVariableToken };
//# sourceMappingURL=is-css-variable.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-css-variable.mjs","sources":["../../../../src/animation/utils/is-css-variable.ts"],"sourcesContent":["import { AnyResolvedKeyframe } from \"../types\"\n\nexport type CSSVariableName = `--${string}`\n\nexport type CSSVariableToken = `var(${CSSVariableName})`\n\nconst checkStringStartsWith =\n <T extends string>(token: string) =>\n (key?: AnyResolvedKeyframe | null): key is T =>\n typeof key === \"string\" && key.startsWith(token)\n\nexport const isCSSVariableName =\n /*@__PURE__*/ checkStringStartsWith<CSSVariableName>(\"--\")\n\nconst startsAsVariableToken =\n /*@__PURE__*/ checkStringStartsWith<CSSVariableToken>(\"var(--\")\nexport const isCSSVariableToken = (\n value?: string\n): value is CSSVariableToken => {\n const startsWithToken = startsAsVariableToken(value)\n\n if (!startsWithToken) return false\n\n // Ensure any comments are stripped from the value as this can harm performance of the regex.\n return singleCssVariableRegex.test(value.split(\"/*\")[0].trim())\n}\n\nconst singleCssVariableRegex =\n /var\\(--(?:[\\w-]+\\s*|[\\w-]+\\s*,(?:\\s*[^)(\\s]|\\s*\\((?:[^)(]|\\([^)(]*\\))*\\))+\\s*)\\)$/iu\n\n/**\n * Check if a value contains a CSS variable anywhere (e.g. inside calc()).\n * Unlike isCSSVariableToken which checks if the value IS a var() token,\n * this checks if the value CONTAINS var() somewhere in the string.\n */\nexport function containsCSSVariable(\n value?: AnyResolvedKeyframe | null\n): boolean {\n if (typeof value !== \"string\") return false\n // Strip comments to avoid false positives\n return value.split(\"/*\")[0].includes(\"var(--\")\n}\n"],"names":[],"mappings":"AAMA,MAAM,qBAAqB,GACvB,CAAmB,KAAa,KAChC,CAAC,GAAgC,KAC7B,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC;MAE3C,iBAAiB;AAC1B,cAAc,qBAAqB,CAAkB,IAAI;AAE7D,MAAM,qBAAqB;AACvB,cAAc,qBAAqB,CAAmB,QAAQ,CAAC;AAC5D,MAAM,kBAAkB,GAAG,CAC9B,KAAc,KACa;AAC3B,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC;AAEpD,IAAA,IAAI,CAAC,eAAe;AAAE,QAAA,OAAO,KAAK;;AAGlC,IAAA,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AACnE;AAEA,MAAM,sBAAsB,GACxB,qFAAqF;AAEzF;;;;AAIG;AACG,SAAU,mBAAmB,CAC/B,KAAkC,EAAA;IAElC,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;;AAE3C,IAAA,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAClD;;;;"}

View File

@@ -0,0 +1,27 @@
const orchestrationKeys = new Set([
"when",
"delay",
"delayChildren",
"staggerChildren",
"staggerDirection",
"repeat",
"repeatType",
"repeatDelay",
"from",
"elapsed",
]);
/**
* Decide whether a transition is defined on a given Transition.
* This filters out orchestration options and returns true
* if any options are left.
*/
function isTransitionDefined(transition) {
for (const key in transition) {
if (!orchestrationKeys.has(key))
return true;
}
return false;
}
export { isTransitionDefined };
//# sourceMappingURL=is-transition-defined.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-transition-defined.mjs","sources":["../../../../src/animation/utils/is-transition-defined.ts"],"sourcesContent":["import type { AnyResolvedKeyframe } from \"../types\"\nimport type { Transition } from \"../types\"\n\nconst orchestrationKeys = new Set([\n \"when\",\n \"delay\",\n \"delayChildren\",\n \"staggerChildren\",\n \"staggerDirection\",\n \"repeat\",\n \"repeatType\",\n \"repeatDelay\",\n \"from\",\n \"elapsed\",\n])\n\n/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nexport function isTransitionDefined(\n transition: Transition & { elapsed?: number; from?: AnyResolvedKeyframe }\n) {\n for (const key in transition) {\n if (!orchestrationKeys.has(key)) return true\n }\n return false\n}\n"],"names":[],"mappings":"AAGA,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAC;IAC9B,MAAM;IACN,OAAO;IACP,eAAe;IACf,iBAAiB;IACjB,kBAAkB;IAClB,QAAQ;IACR,YAAY;IACZ,aAAa;IACb,MAAM;IACN,SAAS;AACZ,CAAA,CAAC;AAEF;;;;AAIG;AACG,SAAU,mBAAmB,CAC/B,UAAyE,EAAA;AAEzE,IAAA,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE;AAC1B,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,IAAI;IAChD;AACA,IAAA,OAAO,KAAK;AAChB;;;;"}

View File

@@ -0,0 +1,7 @@
function makeAnimationInstant(options) {
options.duration = 0;
options.type = "keyframes";
}
export { makeAnimationInstant };
//# sourceMappingURL=make-animation-instant.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"make-animation-instant.mjs","sources":["../../../../src/animation/utils/make-animation-instant.ts"],"sourcesContent":["import { ValueAnimationOptions } from \"../types\"\n\nexport function makeAnimationInstant(\n options: Partial<{\n duration: ValueAnimationOptions[\"duration\"]\n type: ValueAnimationOptions[\"type\"]\n }>\n): void {\n options.duration = 0\n options.type = \"keyframes\"\n}\n"],"names":[],"mappings":"AAEM,SAAU,oBAAoB,CAChC,OAGE,EAAA;AAEF,IAAA,OAAO,CAAC,QAAQ,GAAG,CAAC;AACpB,IAAA,OAAO,CAAC,IAAI,GAAG,WAAW;AAC9B;;;;"}

View File

@@ -0,0 +1,19 @@
import { inertia } from '../generators/inertia.mjs';
import { keyframes } from '../generators/keyframes.mjs';
import { spring } from '../generators/spring.mjs';
const transitionTypeMap = {
decay: inertia,
inertia,
tween: keyframes,
keyframes: keyframes,
spring,
};
function replaceTransitionType(transition) {
if (typeof transition.type === "string") {
transition.type = transitionTypeMap[transition.type];
}
}
export { replaceTransitionType };
//# sourceMappingURL=replace-transition-type.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"replace-transition-type.mjs","sources":["../../../../src/animation/utils/replace-transition-type.ts"],"sourcesContent":["import { inertia } from \"../generators/inertia\"\nimport { keyframes } from \"../generators/keyframes\"\nimport { spring } from \"../generators/spring\"\nimport { GeneratorFactory, ValueAnimationTransition } from \"../types\"\n\nconst transitionTypeMap: { [key: string]: GeneratorFactory } = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n}\n\nexport function replaceTransitionType(transition: ValueAnimationTransition) {\n if (typeof transition.type === \"string\") {\n transition.type = transitionTypeMap[transition.type]\n }\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,GAAwC;AAC3D,IAAA,KAAK,EAAE,OAAO;IACd,OAAO;AACP,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,SAAS,EAAE,SAAS;IACpB,MAAM;CACT;AAEK,SAAU,qBAAqB,CAAC,UAAoC,EAAA;AACtE,IAAA,IAAI,OAAO,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE;QACrC,UAAU,CAAC,IAAI,GAAG,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC;IACxD;AACJ;;;;"}

View File

@@ -0,0 +1,15 @@
/**
* If `transition` has `inherit: true`, shallow-merge it with
* `parentTransition` (child keys win) and strip the `inherit` key.
* Otherwise return `transition` unchanged.
*/
function resolveTransition(transition, parentTransition) {
if (transition?.inherit && parentTransition) {
const { inherit: _, ...rest } = transition;
return { ...parentTransition, ...rest };
}
return transition;
}
export { resolveTransition };
//# sourceMappingURL=resolve-transition.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"resolve-transition.mjs","sources":["../../../../src/animation/utils/resolve-transition.ts"],"sourcesContent":["/**\n * If `transition` has `inherit: true`, shallow-merge it with\n * `parentTransition` (child keys win) and strip the `inherit` key.\n * Otherwise return `transition` unchanged.\n */\nexport function resolveTransition(\n transition: any,\n parentTransition?: any\n) {\n if (transition?.inherit && parentTransition) {\n const { inherit: _, ...rest } = transition\n return { ...parentTransition, ...rest }\n }\n\n return transition\n}\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACG,SAAU,iBAAiB,CAC7B,UAAe,EACf,gBAAsB,EAAA;AAEtB,IAAA,IAAI,UAAU,EAAE,OAAO,IAAI,gBAAgB,EAAE;QACzC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU;AAC1C,QAAA,OAAO,EAAE,GAAG,gBAAgB,EAAE,GAAG,IAAI,EAAE;IAC3C;AAEA,IAAA,OAAO,UAAU;AACrB;;;;"}

View File

@@ -0,0 +1,4 @@
const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
export { cubicBezierAsString };
//# sourceMappingURL=cubic-bezier.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"cubic-bezier.mjs","sources":["../../../../../src/animation/waapi/easing/cubic-bezier.ts"],"sourcesContent":["import { BezierDefinition } from \"motion-utils\"\n\nexport const cubicBezierAsString = ([a, b, c, d]: BezierDefinition) =>\n `cubic-bezier(${a}, ${b}, ${c}, ${d})`\n"],"names":[],"mappings":"AAEO,MAAM,mBAAmB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAmB,KAC9D,CAAA,aAAA,EAAgB,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,CAAA;;;;"}

View File

@@ -0,0 +1,15 @@
import { isBezierDefinition } from 'motion-utils';
import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
import { supportedWaapiEasing } from './supported.mjs';
function isWaapiSupportedEasing(easing) {
return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
!easing ||
(typeof easing === "string" &&
(easing in supportedWaapiEasing || supportsLinearEasing())) ||
isBezierDefinition(easing) ||
(Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
}
export { isWaapiSupportedEasing };
//# sourceMappingURL=is-supported.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-supported.mjs","sources":["../../../../../src/animation/waapi/easing/is-supported.ts"],"sourcesContent":["import { Easing, isBezierDefinition } from \"motion-utils\"\nimport { supportsLinearEasing } from \"../../../utils/supports/linear-easing\"\nimport { supportedWaapiEasing } from \"./supported\"\n\nexport function isWaapiSupportedEasing(easing?: Easing | Easing[]): boolean {\n return Boolean(\n (typeof easing === \"function\" && supportsLinearEasing()) ||\n !easing ||\n (typeof easing === \"string\" &&\n (easing in supportedWaapiEasing || supportsLinearEasing())) ||\n isBezierDefinition(easing) ||\n (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))\n )\n}\n"],"names":[],"mappings":";;;;AAIM,SAAU,sBAAsB,CAAC,MAA0B,EAAA;IAC7D,OAAO,OAAO,CACV,CAAC,OAAO,MAAM,KAAK,UAAU,IAAI,oBAAoB,EAAE;AACnD,QAAA,CAAC,MAAM;SACN,OAAO,MAAM,KAAK,QAAQ;AACvB,aAAC,MAAM,IAAI,oBAAoB,IAAI,oBAAoB,EAAE,CAAC,CAAC;QAC/D,kBAAkB,CAAC,MAAM,CAAC;AAC1B,SAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CACtE;AACL;;;;"}

View File

@@ -0,0 +1,29 @@
import { isBezierDefinition } from 'motion-utils';
import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
import { generateLinearEasing } from '../utils/linear.mjs';
import { cubicBezierAsString } from './cubic-bezier.mjs';
import { supportedWaapiEasing } from './supported.mjs';
function mapEasingToNativeEasing(easing, duration) {
if (!easing) {
return undefined;
}
else if (typeof easing === "function") {
return supportsLinearEasing()
? generateLinearEasing(easing, duration)
: "ease-out";
}
else if (isBezierDefinition(easing)) {
return cubicBezierAsString(easing);
}
else if (Array.isArray(easing)) {
return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
supportedWaapiEasing.easeOut);
}
else {
return supportedWaapiEasing[easing];
}
}
export { mapEasingToNativeEasing };
//# sourceMappingURL=map-easing.mjs.map

Some files were not shown because too many files have changed in this diff Show More