First of all I love the animation on the navbar. It's just a bit laggy and slow, which is because you're animating width.
Generally it's best to avoid animating anything but transform (e.g. translate, scale, rotate etc) and opacity. These are GPU-accelerated and don't cause the browser to have to re-layout the page (animating things like top or width do), which means the animations can easily hit 60 frames per second.
In this case you could animate transform: scaleX(1.2) (ish) instead of width.
First of all I love the animation on the navbar. It's just a bit laggy and slow, which is because you're animating width.
Generally it's best to avoid animating anything but
transform(e.g.translate,scale,rotateetc) andopacity. These are GPU-accelerated and don't cause the browser to have to re-layout the page (animating things liketoporwidthdo), which means the animations can easily hit 60 frames per second.In this case you could animate
transform: scaleX(1.2)(ish) instead ofwidth.There's more info here:
https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
https://aerotwist.com/blog/flip-your-animations/