Animated header #1
Featuring a nice border animation with a back easing
Animated header #2
Featuring a dual logo transition and a menu links color animation
Animated header #3
Featuring a nice shadow animation and a transparent background
Header animations powered by GSAP, featuring smooth transitions for borders, backgrounds, width, height, and even logos, and menu links.
When prefers-reduced-motion is enabled, animations will run at a slower pace for accessibility.
To make it work, the following CSS properties has been added to the BODY tag : display:flex and justify-content:center. In most case, it should not affect the pages.