diff --git a/packages/number-flow/src/lite.ts b/packages/number-flow/src/lite.ts index bc13f28..167cb81 100644 --- a/packages/number-flow/src/lite.ts +++ b/packages/number-flow/src/lite.ts @@ -391,12 +391,20 @@ abstract class Section { } protected pop(chars: Map) { - // Calculate offsets for removed before popping, to avoid layout thrashing: + // Batch all layout offset reads before popping, to avoid layout thrashing: + const positions = new Map() chars.forEach((char) => { - char.el.style.top = `${char.el.offsetTop}px` - char.el.style[this.justify] = `${offset(char.el, this.justify)}px` + positions.set(char, { + top: char.el.offsetTop, + offset: offset(char.el, this.justify) + }) }) + + // Batch all style writes chars.forEach((char) => { + const pos = positions.get(char)! + char.el.style.top = `${pos.top}px` + char.el.style[this.justify] = `${pos.offset}px` char.el.setAttribute('inert', '') char.present = false }) @@ -461,6 +469,9 @@ abstract class Section { // Make sure to pass this in before starting to animate: this.children.forEach((comp) => comp.didUpdate(rect)) + // Early exit if animations are disabled + if (!this.flow.computedAnimated) return + const offset = rect[this.justify] const dx = this._prevOffset! - offset @@ -675,6 +686,9 @@ export class Digit extends Char { } didUpdate(parentRect: DOMRect) { + // Early exit if animations are disabled + if (!this.flow.computedAnimated) return + const rect = this.el.getBoundingClientRect() const offset = rect[this.section.justify] - parentRect[this.section.justify] const halfWidth = rect.width / 2