motion-v
Version:
<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
57 lines (56 loc) • 1.5 kB
JavaScript
const ScrollOffset = {
Enter: [[0, 1], [1, 1]],
Exit: [[0, 0], [1, 0]],
Any: [[1, 0], [0, 1]],
All: [[0, 0], [1, 1]]
};
var presets = [
[ScrollOffset.Enter, "entry"],
[ScrollOffset.Exit, "exit"],
[ScrollOffset.Any, "cover"],
[ScrollOffset.All, "contain"]
];
var stringToProgress = {
start: 0,
end: 1
};
function parseStringOffset(s) {
const parts = s.trim().split(/\s+/);
if (parts.length !== 2) return void 0;
const a = stringToProgress[parts[0]];
const b = stringToProgress[parts[1]];
if (a === void 0 || b === void 0) return void 0;
return [a, b];
}
function normaliseOffset(offset) {
if (offset.length !== 2) return void 0;
const result = [];
for (const item of offset) if (Array.isArray(item)) result.push(item);
else if (typeof item === "string") {
const parsed = parseStringOffset(item);
if (!parsed) return void 0;
result.push(parsed);
} else return;
return result;
}
function matchesPreset(offset, preset) {
const normalised = normaliseOffset(offset);
if (!normalised) return false;
for (let i = 0; i < 2; i++) {
const o = normalised[i];
const p = preset[i];
if (o[0] !== p[0] || o[1] !== p[1]) return false;
}
return true;
}
function offsetToViewTimelineRange(offset) {
if (!offset) return {
rangeStart: "contain 0%",
rangeEnd: "contain 100%"
};
for (const [preset, name] of presets) if (matchesPreset(offset, preset)) return {
rangeStart: `${name} 0%`,
rangeEnd: `${name} 100%`
};
}
export { ScrollOffset, offsetToViewTimelineRange };