diff --git a/src/scroll-timeline-base.js b/src/scroll-timeline-base.js index 2c85492..9889dc6 100644 --- a/src/scroll-timeline-base.js +++ b/src/scroll-timeline-base.js @@ -213,8 +213,18 @@ export function measureSubject(source, subject) { * Update measurements of source, and update timelines * @param {HTMLElement} source */ -function updateMeasurements(source) { +function updateMeasurements(source, throttle) { let details = sourceDetails.get(source); + if (details.updateScheduled && throttle) { + // Update already scheduled for the next animation frame + return; + } + + details.updateScheduled = true + requestAnimationFrame(() => { + details.updateScheduled = false + }) + details.sourceMeasurements = measureSource(source); // Update measurements of the subject of connected view timelines @@ -226,9 +236,6 @@ function updateMeasurements(source) { } } - if (details.updateScheduled) - return; - setTimeout(() => { // Schedule a task to update timelines after all measurements are completed for (const ref of details.timelineRefs) { @@ -237,10 +244,7 @@ function updateMeasurements(source) { updateInternal(timeline); } } - - details.updateScheduled = false; }); - details.updateScheduled = true; } function updateSource(timeline, source) { @@ -283,9 +287,7 @@ function updateSource(timeline, source) { // Use resize observer to detect changes to source size const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - updateMeasurements(timelineDetails.source) - } + updateMeasurements(timelineDetails.source, true) }); resizeObserver.observe(source); for (const child of source.children) { @@ -295,7 +297,7 @@ function updateSource(timeline, source) { // Use mutation observer to detect updated style attributes on source element const mutationObserver = new MutationObserver((records) => { for (const record of records) { - updateMeasurements(record.target); + updateMeasurements(record.target, false); } }); mutationObserver.observe(source, {attributes: true, attributeFilter: ['style', 'class']}); @@ -836,12 +838,12 @@ export class ViewTimeline extends ScrollTimeline { } if (details.subject) { const resizeObserver = new ResizeObserver(() => { - updateMeasurements(details.source) + updateMeasurements(details.source, true) }) resizeObserver.observe(details.subject) const mutationObserver = new MutationObserver(() => { - updateMeasurements(details.source); + updateMeasurements(details.source, false); }); mutationObserver.observe(details.subject, {attributes: true, attributeFilter: ['class', 'style']}); }