Home/ Questions/Q 9164393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:40:22+00:00

I am building a custom header for a website that requires some simple animation.

  • 0

I am building a custom header for a website that requires some simple animation. The header starts off with 3 divs of the same size, when one of these divs is activated (clicked) the remaining divs shrink while the activated div expands to fill the horizontal space.

The header works fine, but when the divs expand/shrink there tends to be a 1-2 pixel change in the overall horizontal size of the header which makes the header appear to jitter. It can be seen if you focus on the right side of the header when interacting with it.

I’ve simplified my code down to it’s most basic form and added it into a jsbin.

http://jsbin.com/acikib/13/edit

Is there any way to remove the jitter, or a better approach to the implementation that could avoid it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your math is off. Change your max width to 816 instead of 818.

    Your CSS states that each block is 296, so 296*3 = 888.
    Your Javascript was telling the large block to be 818 and the small blocks to be 36. 818+36*2 = 890.

    So you were increasing the total size of your boxes by 2 pixels, which caused the jagged animation the first time.

    http://jsbin.com/acikib/20/edit

    • 0