- Select the “Auto Tab Link” element.
- On the right-side menu (Style, Settings, Interactions) click “Interactions”.
- Below “Element trigger” you will see the animation named “Tab change”, click on it.
- Now, below “Tab change” you will see “Tab in view” in bold, with a long list of all the animations present on your site. Scroll down until you see the animation “Tab Content Hide IN”. (This animation should be highlighted with a filled white circle next to it and outlined with a blue box) This is the animation you want to edit.
- Click “Tab Content Hide IN” and now below “Actions” you will see the two actions for the “Heading Tab” text color.
- The second “Heading Tab” text color action is the one changing the text color to orange. Click on it and scroll down. Below “Typography” click the color swatch to edit the color
- Click the “Done” button (top right) to save your edit.
**Webflow currently has an issue with interactions/animations/actions not supporting color variables (assigned color swatches). So you will have to repeat a similar process for each interaction/animation/action that involves a color you want to edit. Personally, I have a text document open with the color-hex-code to copy and then paste into the actions color picker.
This sucks for all Webflow users.
See this post: