What occurs when requestAnimationFrame(callback); changes width of an image? repaint or reflow?

Question

I have read some topics about reflow and repait this is what I maneged to understand.

A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout.

A reflow occurs when changes are made to the elements layout.

Anyway, when

window.requestAnimationFrame(callback);

updates selected image element changing it's width what occurs repaint or reflow. In MDN the callback parameter was discriebed as:

A parameter specifying a function to call when it's time to update your animation for the next repaint.

So what occurs after all, reflow or repaint?

Here is an example of my problem:

 var jediImg = document.getElementById('jedi-image'); jediImg.src = 'images/jedi-image.jpg'; jediImg.width = 400; var times = 20, update = -1; var isJediVisible = true; function animationFrame() { if (isJediVisible) { jediImg.width = 0; } else { jediImg.width = 400; } isJediVisible = !isJediVisible; jediImg.width = (20 - times) * 50; times += update; if (times === 0) { update = 1; } if (times == 20) { update = -1; } requestAnimationFrame(animationFrame); } animationFrame(); 

Thank you for your answers.

Answer 1

Change in width will trigger the reflow and paint. See more about triggers here .