Motion from zero: move the transform, not the width

Every frame, the browser would like to paint and nothing else. Changing width or left changes layout, so elements around the box have to be measured again. Changing transform moves the pixels of the box. The layout stays. The tip: store the motion as a translate, and leave width alone.

Transform does not redo layout#

Changing width or left changes layout, so the browser measures the neighbors again. Changing transform composites the element's pixels in a new place and leaves the layout box where it was. The string translateX(24px) is the value you assign at the edge. Keep distance as a number so a later frame can multiply it. Build the px string only when it meets CSS. Opacity is the other property that does not reflow. Use width when the box really is a different size.

1. distancepixels24
2. transformCSStranslateX(24px)

const distance = 24;
const transform = "translateX(" + distance + "px)";
console.log(transform);

translateX(24px)

The string is the declaration#

distance is the 24 from lesson 1. Joining it into "translateX(24px)" makes the value you would set on the transform property. The element shifts 24 pixels to the right. Its width in the layout does not change, so the neighbors do not move.

element.style.width = "240px" would also move the right edge, and it would reflow. Use width when the box really is a different size and the page should adapt. Use transform when you are performing the change, especially inside a loop of frames. Opacity is the other cheap property. Fading from 0 to 1 does not reflow.

Build the string from the number#

Keep distance as a number for the math. Build the px string at the edge, where it meets CSS. A later frame can compute distance * t and build a new string. The number stays easy to multiply. The next lesson is t itself: a number from 0 to 1, and a function that eases it.