This commit is contained in:
Iliyan Angelov
2025-09-14 23:24:25 +03:00
commit c67067a2a4
71311 changed files with 6800714 additions and 0 deletions

View File

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

View File

@@ -0,0 +1,62 @@
import { transformProps } from '../../render/html/utils/transform.mjs';
import { appearAnimationStore } from './store.mjs';
import { appearStoreId } from './store-id.mjs';
let handoffFrameTime;
function handoffOptimizedAppearAnimation(elementId, valueName,
/**
* Legacy arguments. This function is inlined as part of SSG so it can be there's
* a version mismatch between the main included Motion and the inlined script.
*
* Remove in early 2024.
*/
_value, _frame) {
const optimisedValueName = transformProps.has(valueName)
? "transform"
: valueName;
const storeId = appearStoreId(elementId, optimisedValueName);
const optimisedAnimation = appearAnimationStore.get(storeId);
if (!optimisedAnimation) {
return null;
}
const { animation, startTime } = optimisedAnimation;
const cancelAnimation = () => {
appearAnimationStore.delete(storeId);
try {
animation.cancel();
}
catch (error) { }
};
/**
* If the startTime is null, this animation is the Paint Ready detection animation
* and we can cancel it immediately without handoff.
*
* Or if we've already handed off the animation then we're now interrupting it.
* In which case we need to cancel it.
*/
if (startTime === null || window.HandoffComplete) {
cancelAnimation();
return null;
}
else {
/**
* Otherwise we're handing off this animation to the main thread.
*
* Record the time of the first handoff. We call performance.now() once
* here and once in startOptimisedAnimation to ensure we're getting
* close to a frame-locked time. This keeps all animations in sync.
*/
if (handoffFrameTime === undefined) {
handoffFrameTime = performance.now();
}
/**
* We use main thread timings vs those returned by Animation.currentTime as it
* can be the case, particularly in Firefox, that currentTime doesn't return
* an updated value for several frames, even as the animation plays smoothly via
* the GPU.
*/
return handoffFrameTime - startTime || 0;
}
}
export { handoffOptimizedAppearAnimation };

View File

@@ -0,0 +1,71 @@
import { appearStoreId } from './store-id.mjs';
import { animateStyle } from '../animators/waapi/index.mjs';
import { optimizedAppearDataId } from './data-id.mjs';
import { handoffOptimizedAppearAnimation } from './handoff.mjs';
import { appearAnimationStore } from './store.mjs';
import { noop } from '../../utils/noop.mjs';
/**
* A single time to use across all animations to manually set startTime
* and ensure they're all in sync.
*/
let startFrameTime;
/**
* A dummy animation to detect when Chrome is ready to start
* painting the page and hold off from triggering the real animation
* until then. We only need one animation to detect paint ready.
*
* https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
*/
let readyAnimation;
function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
// Prevent optimised appear animations if Motion has already started animating.
if (window.HandoffComplete) {
window.HandoffAppearAnimations = undefined;
return;
}
const id = element.dataset[optimizedAppearDataId];
if (!id)
return;
window.HandoffAppearAnimations = handoffOptimizedAppearAnimation;
const storeId = appearStoreId(id, name);
if (!readyAnimation) {
readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]],
/**
* 10 secs is basically just a super-safe duration to give Chrome
* long enough to get the animation ready.
*/
{ duration: 10000, ease: "linear" });
appearAnimationStore.set(storeId, {
animation: readyAnimation,
startTime: null,
});
}
const startAnimation = () => {
readyAnimation.cancel();
const appearAnimation = animateStyle(element, name, keyframes, options);
/**
* Record the time of the first started animation. We call performance.now() once
* here and once in handoff to ensure we're getting
* close to a frame-locked time. This keeps all animations in sync.
*/
if (startFrameTime === undefined) {
startFrameTime = performance.now();
}
appearAnimation.startTime = startFrameTime;
appearAnimationStore.set(storeId, {
animation: appearAnimation,
startTime: startFrameTime,
});
if (onReady)
onReady(appearAnimation);
};
if (readyAnimation.ready) {
readyAnimation.ready.then(startAnimation).catch(noop);
}
else {
startAnimation();
}
}
export { startOptimizedAppearAnimation };

View File

@@ -0,0 +1,3 @@
const appearStoreId = (id, value) => `${id}: ${value}`;
export { appearStoreId };

View File

@@ -0,0 +1,3 @@
const appearAnimationStore = new Map();
export { appearAnimationStore };