I want to set up a hover state for cards on a website using the new GSAP interactions. Although the cards have different class names, and some different elements, they all have an image that I would like to scale on hover as the primary interaction.
Is there a way to achieve this using one interaction and targeting the desired elements with attributes? For example, even though 2 different card layouts have different class names, can I target the link block elements with an attribute as the trigger, and the image element with an attribute in the action?
I have this set up but I’m running into the issue of all the cms items with those attributes running the hover state, not just the one currently being hovered on. Any ideas on how to make this work?
I’m guessing it has something to do with targeting descendants but I’m struggling :/
1 Like
Hi there,
To control hover animations for specific cards without affecting others, you’ll need to use the Descendants interaction scope. Here’s how to set it up:
The Descendants scope allows you to target elements within the specific card being hovered over, rather than affecting all similar elements across your page. When setting up your interaction, click the scope button (chain link icon) in the Interactions panel and select “Descendants” from the dropdown. This ensures your hover animations only trigger for elements within the card currently being interacted with.
For best results, make sure your card structure is consistent and that the elements you want to animate are properly nested within each card container.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
1 Like