Issue with 'Current Class' on a Tab Interaction

I’m having some difficulty after copying (not cloning - I actively unliked the CMS and copied it onto a new page) Tim Rick’s cloneable site: GSAP ScrollTrigger CMS Scroll - Webflow

I’ve gotten everything to work as he did (I’m just playing around and learning), but the interaction on the features tab does not seem to be working. Specifically, the ‘active’ tab should have a white heading, white bar and white text, and the others should have less opacity so they look greyed out, until they become ‘active’ on selection. You will notice that the 1 pixel bar is working fine, but the headings and paragraph text do not turn clear white upon being chosen (even though the tab pictures and videos change just fine). I’ve racked my brains all day over this, checked the global styles custom code embed 100 times, but just cannot figure it out. Any help greatly appreciated, thanks in advance.


Here is my site Read-Only: Webflow - hen-ry

Hi Henry,

this behavior occurs, because the paragraphs features-tab_p have set white as their text color.
When designing with the current state in mind, it’s necessary to have the element with the current class pass down the desired values, instead of assigning it’s children the values.

Example:
Tab Current (set color to gray)
→ Paragraph (set color to white)
=> Paragraph will be white

Tab Current (set color to gray)
→ Paragraph (no set color)
=> Paragraph will be gray

Having a Tab Element with the class current will pass down its settings to the paragraph child. However, if the paragraph already has a color assigned to it, it will prefer the set value over the passed one.

I recommend taking a closer look at the example page in webflow to check which elements get a new value (blue font) and which ones are getting values passed down from other parent elements (orange font)

Here, Font, Weight, and Size are values passed down, while the Color is set for this element and overrides all other values from the elements above.
image

More information on classes can be found here.

Cheers
Leon

Leon thanks so much for this detailed reply - that makes a lot of sense.
Unfortunately, I’m having some difficulty changing where the colour class on the paragraph / h6 text is inherited from. Is there a way to simply change where these styles are inherited from?
Thanks again!

Sorry, ignore, just figured it !!!
Thank you so much