Chapter 180: Change transformOrigin Without a Jump (Helper)

Core Idea

A short helper that changes an element's transformOrigin and immediately compensates its x/y position so the element doesn't visibly jump — the same underlying problem and fix as the two-element origin-alignment helper (Chapter 160), but for a single element changing its own origin.

Code Examples

function smoothOriginChange(targets, transformOrigin) {
  gsap.utils.toArray(targets).forEach((target) => {
    let before = target.getBoundingClientRect();
    gsap.set(target, { transformOrigin });
    let after = target.getBoundingClientRect();
    gsap.set(target, { x: "+=" + (before.left - after.left), y: "+=" + (before.top - after.top) });
  });
}

• What it demonstrates: measure before/after the origin change, then offset position by the delta.

Key Takeaways

1. Simpler variant of Chapter 160's two-element alignment — use this one when you're just repositioning a single element's own origin, not matching it to another element.

Connects To

• Align transformOrigin of two elements (Chapter 160): the two-element version of this same technique.