Cannot change text color in an interaction

[acarinha (Dragana)]

Hi!

I am trying to change text colour in an animation in the section with the name:
”I bridge the gap between business goals and customers needs”.

When hovering on the columns, the background of the text turns purple and the text color should turn white, but every time I try to set it white in the interactions panel, it does not work.

Any help much appreciated!

Here is my public share link: Webflow - Dragana | Senior Product Designer
(how to access public share link)

[WebflowAIModerator]

Hi there,

To change text color in animations, follow these steps:

1. Select the text element you want to animate
2. Open the Interactions panel (keyboard shortcut: Shift + I)
3. Click the “+” icon to add a new animation
4. In the Style category, select “Text color”
5. Click the color swatch that appears
6. Choose your desired color from the color picker or input a specific hex code

You can adjust the timing and easing of the color transition in the animation settings panel. The color change can be triggered by various events like hover, click, or scroll depending on your interaction settings.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

[ahmed_moeed (Webflow Developer)]

@acarinha for performance and reliability, it would be better to switch to CSS-based hover states. CSS runs natively in the browser and is much lighter, while JS interactions require more load and can feel slower on some devices. Switching to CSS will make the hover smoother, faster, and more stable.

[AJ_Dev (from Memberstack)]

Hey @acarinha ,

You can edit the interaction as follows, since you have different classes enabled for the text the following approach works. If you can, you can introduce one common class for the text elements so that you can target one class and set it’s color to Cream. But for the current setup that you have, the following should work.

Card- hover animation:

• Instead of changing the text color of the card element, target the relevant text elements like text-.75rem 2, font-meow 2, text-1rem 2and set it’s text color to Cream accordingly as highlighted below:
• 

Card hover out animation:

• Here you can set the text-.75rem 2, font-meow 2, text-1rem 2 text-first-letter-large element’s text color to ‘Neutral Dark’ as highlighted below.

• 

• For the text-1rem 2 element alone you can set the text color to ‘Brand Color’ based on your design requirement.

• 

• The order of the actions in the card hover out interaction is important so that it follows your original color requirement.

This should give you the result as follows:

Hope this helps.

[acarinha (Dragana)]

@AJ_Dev

over animation:

It helps tremendously, now I also understand more the logic behind it. Thank you!

[AJ_Dev (from Memberstack)]

Welcome @acarinha, glad it helped in solving the use-case.