)");
}
});
}
// Init ViewTimeline for markers. Use the constructor from the *owning* window so that
// markers living in a same-origin host page (useTopWindowScroll) are tracked in the
// correct realm rather than against the iframe's own (non-scrolling) document.
const ViewTimelineCtor = (scrollWin as unknown as { ViewTimeline?: new (opts: { subject: Element, axis: string }) => ViewTimeline }).ViewTimeline;
if (!ViewTimelineCtor) {
// ViewTimeline isn't available on the target window yet. This is expected transiently
// on the "self" path while the async scroll-timeline polyfill is still loading, and
// permanently when useTopWindowScroll targets a host page without ViewTimeline support.
// Don't persist the half-built marker set — drop the cache so it's rebuilt next frame
// (self-heals once the polyfill loads), and fall back to linear scrubbing for now.
if (!this._viewTimelineWarned && (debug || isDevEnvironment())) {
this._viewTimelineWarned = true;
console.warn("[ScrollFollow] ViewTimeline is not available on the target window — falling back to linear scroll. If this persists with useTopWindowScroll, the scroll-timeline polyfill must be present on the host page.");
}
timelineMarkerArrays.delete(director);
markersArray.length = 0;
}
else {
for (const marker of markersArray) {
if (marker.element) {
// https://scroll-driven-animations.style/tools/view-timeline/ranges
marker.timeline = new ViewTimelineCtor({
subject: marker.element,
axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
});
}
}
}
}
weightsArray.length = 0;
let sum = 0;
const oneFrameTime = 1 / 60;
// We keep a separate count here in case there are some markers that could not be resolved so point to *invalid* elements - the timeline should fallback to 0-1 scroll behaviour then
let markerCount = 0;
for (let i = 0; i < markersArray.length; i++) {
const marker = markersArray[i];
if (!marker.element) continue;
const nextMarker = markersArray[i + 1];
const nextTime = nextMarker
? (nextMarker.time - oneFrameTime)
: duration;
markerCount += 1;
const timeline = marker.timeline;
if (timeline) {
const time01 = calculateTimelinePositionNormalized(timeline);
// remap 0-1 to 0 - 1 - 0 (full weight at center)
const weight = 1 - Math.abs(time01 - 0.5) * 2;
const name = `marker${i}`;
if (time01 > 0 && time01 <= 1) {
const lerpTime = marker.time + (nextTime - marker.time) * time01;
weightsArray.push({ name, time: lerpTime, weight: weight });
sum += weight;
}
// Before the first marker is reached
else if (i === 0 && time01 <= 0) {
weightsArray.push({ name, time: 0, weight: 1 });
sum += 1;
}
// After the last marker is reached
else if (i === markersArray.length - 1 && time01 >= 1) {
weightsArray.push({ name, time: duration, weight: 1 });
sum += 1;
}
}
}
if (weightsArray.length <= 0 && markerCount <= 0) {
director.time = value * duration;
}
else if (weightsArray.length > 0) {
// normalize and calculate weighted time
let time = weightsArray[0].time; // fallback to first time
if (weightsArray.length > 1) {
for (const entry of weightsArray) {
const weight = entry.weight / Math.max(0.00001, sum);
// console.log(weight.toFixed(2))
// lerp time based on weight
const diff = Math.abs(entry.time - time);
time += diff * weight;
}
}
if (this.damping <= 0 || this._firstUpdate) {
director.time = time;
}
else {
director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
}
const delta = Math.abs(director.time - time);
if (delta > .001) { // if the time is > 1/100th of a second off we need another update
this._needsUpdate = true;
}
if (debug && this.context.time.frame % 30 === 0) {
console.log(`[ScrollFollow ] Timeline ${director.name}: ${time.toFixed(3)}`, weightsArray.map(w => `[${w.name} ${(w.weight * 100).toFixed(0)}%]`).join(", "));
}
}
}
}
const timelineMarkerArrays: WeakMap
> = new WeakMap();
type OverlapInfo = {
name: string,
/** Marker time */
time: number,
/** Overlap in pixels */
weight: number,
}
const weightsArray: OverlapInfo[] = [];
// type SelectorCache = {
// /** The selector used to query the *elements */
// selector: string,
// elements: Element[] | null,
// usedElementCount: number,
// }
// const querySelectorResults: Array = [];
const needleScrollMarkerCache = new Array();
let needsScrollMarkerRefresh = true;
function tryGetElementsForSelector(index: number, doc: Document): Element | null {
if (!needsScrollMarkerRefresh) {
const element = needleScrollMarkerCache[index] || null;
return element;
}
needsScrollMarkerRefresh = false;
needleScrollMarkerCache.length = 0;
const markers = doc.querySelectorAll(`[data-timeline-marker]`);
markers.forEach((m, i) => {
needleScrollMarkerCache[i] = m;
});
needsScrollMarkerRefresh = false;
return tryGetElementsForSelector(index, doc);
}
// #region ScrollTimeline
function calculateTimelinePositionNormalized(timeline: ViewTimeline) {
if (!timeline.source) return 0;
const currentTime = timeline.currentTime;
const duration = timeline.duration;
let durationValue = 1;
if (duration.unit === "seconds") {
durationValue = duration.value;
}
else if (duration.unit === "percent") {
durationValue = duration.value;
}
const t01 = currentTime.unit === "seconds" ? (currentTime.value / durationValue) : (currentTime.value / 100);
return t01;
}
declare global {
interface ViewTimeline {
axis: 'block' | 'inline';
currentTime: { unit: 'seconds' | 'percent', value: number };
duration: { unit: 'seconds' | 'percent', value: number };
source: Element | null;
}
}