Symbol has content that is not "hot swappable"

Hello, I created a symbol for a “case study card” and it has a div that I would like to place other divs/elements in to create onHover animations. In the attached example the three bars scale to different widths onHover. However, each card will have its own “case study animation” structure. Is this a case where it’s best not to create a symbol, or are there alternatives? Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You cannot yet override anything other than text, links, and images inside of a symbol.

If a case study card content is only text, links, and images, then you can use Symbol Content Override to define fields for anything you need to change per Symbol instance. Otherwise, the answer to your question (“Is this a case where it’s best not to create a symbol?”) is yes, it’s the case.

In the future, Symbol Content Override will evolve and give us the power to alter classes, offering more possibilities (like having multiple cards set into the Symbol and altering their Display property to show/hide them.)

Might it be best to remove the dynamic portions from the symbol (in this case, the three bars) so there is some DRY aspect here? Is there a clean way to have the three bars reference the div “case study animation” if they live outside the Case Study Card?

Thank you @vincent

That’s a great creative question… maybe. Can you show me what is a case study card, its content? and how the div animates/show the card content?

From the image I originally attached, the three bars simply expand to the right independently. Does that answer your question?

I have three other case studies, three other simple animations that I envision building with HTML elements (most likely divs)…

No, I don’t get how those bars are showing a case study… Are they progress bars showing the advancement of a project?