Tabs Underline Animation in Current State

Design help Animations & Interactions
1

Hi Guys :wave:

I need help with adding animation between Hover In and Current states. Below GIF with animation wich, I want to achieve.

HoverInOutAnimation
HoverInOutAnimation1200×403 215 KB

Summarizing

  1. Hover In - 30% width and 100% opacity of the yellow underline at the bottom of the tab
  2. Hover Out - 0% width and 0% opacity of the yellow underline at the bottom of the tab
  3. Current State - 100% width and 100% opacity of the yellow underline at the bottom of the tab

Challenges:

  1. Create animation between these two states.
  2. Display full-width yellow underline in the current state

Tabs are implemented in What We Do section.

Webflow magicians, please help :mage::woman_mage:

Here is my public share link: LINK
(how to access public share link)

2

Can anyone help me with this? :pray:t3:

3

Thanks for all comments regarding my question :joy:.
I figured out how to do it :tada:

Have a nice day :slight_smile: