I’ve created the search bar and given it the hover over animation. It’s working when I put its instance alone. But whenever I’m putting it in the top header instance it’s not working.
I think I found the fix. So, earlier the elements of that component were set on the fixed width. Then I researched and found one solution that your elements of components should be on the hug width not on the fix width.
So, if you are trying to achieve the the smart animation of expanding the width of any components on the hover over. Then the default element and other element should be on the hug width.